Copy paste the below snippet in your custom css to make your database views appear in different tabs.
/* render database views as tabs */
.notion-collection-view-dropdown-content {
display: flex;
box-shadow: none;
align-items: center;
justify-content: start;
gap: 30px;
flex-wrap: wrap;
margin: 0 auto !important;
}
.notion-collection-view-dropdown-content-item-active-icon>svg {
display: none !important;
}
.notion-view-type>svg{
display: none !important;
}
.notion-collection-view-type-title{
overflow: unset;
}
.notion-collection-view-dropdown-content-item {
padding: 10px 20px 10px 20px;
border-radius:5px;
box-shadow:0px 0px 0px 2px black;
color: white !important;
}
.notion-collection-view-dropdown-content-item:focus,
.notion-collection-view-dropdown-content-item-active {
background-color:black;
color: white !important;
}
.notion-collection-view-dropdown-content-item-active>.notion-collection-view-type>.notion-view-type>.notion-collection-view-type-title{
color: white !important;
}
.dropdown {
display: block;
}
.dropdown-trigger {
display: none;
}
.dropdown-menu {
display: block;
position: unset;
z-index: 99;
}
.dropdown-content{
background: unset;
}
.notion-collection-view-dropdown-content{
padding: 25px 0px 25px 0px;
}
.notion-collection-header{
display: flex;
justify-content: start;
padding-left: 90px;
align-items: center;
margin: 10px 0px 60px 0px;
}
.notion-collection-view-dropdown-content {
display: flex;
box-shadow: none;
align-items: center;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}