Basic example
With the basic example od tabs component you can navigate between groups of content that are related and at the same level of hierarchy.
<!--Tabs navigation-->
<ul
class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0"
role="tablist"
data-te-nav-ref>
<li role="presentation">
<a
href="#tabs-home"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-home"
data-te-nav-active
role="tab"
aria-controls="tabs-home"
aria-selected="true"
>Home</a
>
</li>
<li role="presentation">
<a
href="#tabs-profile"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-profile"
role="tab"
aria-controls="tabs-profile"
aria-selected="false"
>Profile</a
>
</li>
<li role="presentation">
<a
href="#tabs-messages"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-messages"
role="tab"
aria-controls="tabs-messages"
aria-selected="false"
>Messages</a
>
</li>
<li role="presentation">
<a
href="#tabs-contact"
class="disabled pointer-events-none my-2 block border-x-0 border-b-2 border-t-0 border-transparent bg-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent dark:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-contact"
role="tab"
aria-controls="tabs-contact"
aria-selected="false"
>Contact</a
>
</li>
</ul>
<!--Tabs content-->
<div class="mb-6">
<div
class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-home"
role="tabpanel"
aria-labelledby="tabs-home-tab"
data-te-tab-active>
Tab 1 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-profile"
role="tabpanel"
aria-labelledby="tabs-profile-tab">
Tab 2 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-messages"
role="tabpanel"
aria-labelledby="tabs-profile-tab">
Tab 3 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-contact"
role="tabpanel"
aria-labelledby="tabs-contact-tab">
Tab 4 content
</div>
</div>
// Initialization for ES Users
import {
Tab,
initTE,
} from "tw-elements";
initTE({ Tab });
Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
Fill
Stretch the tab list to fit the container.
<!--Tabs navigation-->
<ul
class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0"
role="tablist"
data-te-nav-ref>
<li role="presentation" class="flex-auto text-center">
<a
href="#tabs-home01"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-home01"
data-te-nav-active
role="tab"
aria-controls="tabs-home01"
aria-selected="true"
>Home</a
>
</li>
<li role="presentation" class="flex-auto text-center">
<a
href="#tabs-profile01"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-profile01"
role="tab"
aria-controls="tabs-profile01"
aria-selected="false"
>Profile</a
>
</li>
<li role="presentation" class="flex-auto text-center">
<a
href="#tabs-messages01"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-messages01"
role="tab"
aria-controls="tabs-messages01"
aria-selected="false"
>Messages</a
>
</li>
<li role="presentation" class="flex-auto text-center">
<a
href="#tabs-contact01"
class="disabled pointer-events-none my-2 block border-x-0 border-b-2 border-t-0 border-transparent bg-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent dark:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-contact01"
role="tab"
aria-controls="tabs-contact01"
aria-selected="false"
>Contact</a
>
</li>
</ul>
<!--Tabs content-->
<div class="mb-6">
<div
class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-home01"
role="tabpanel"
aria-labelledby="tabs-home-tab01"
data-te-tab-active>
Tab 1 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-profile01"
role="tabpanel"
aria-labelledby="tabs-profile-tab01">
Tab 2 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-messages01"
role="tabpanel"
aria-labelledby="tabs-profile-tab01">
Tab 3 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-contact01"
role="tabpanel"
aria-labelledby="tabs-contact-tab01">
Tab 4 content
</div>
</div>
// Initialization for ES Users
import {
Tab,
initTE,
} from "tw-elements";
initTE({ Tab });
Justify
Arrange the tabs in a grid to stretch the entire width of the parent element.
<!--Tabs navigation-->
<ul
class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0"
role="tablist"
data-te-nav-ref>
<li role="presentation" class="flex-grow basis-0 text-center">
<a
href="#tabs-home02"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-home02"
data-te-nav-active
role="tab"
aria-controls="tabs-home02"
aria-selected="true"
>Home</a
>
</li>
<li role="presentation" class="flex-grow basis-0 text-center">
<a
href="#tabs-profile02"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-profile02"
role="tab"
aria-controls="tabs-profile02"
aria-selected="false"
>Profile</a
>
</li>
<li role="presentation" class="flex-grow basis-0 text-center">
<a
href="#tabs-messages02"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-messages02"
role="tab"
aria-controls="tabs-messages02"
aria-selected="false"
>Messages</a
>
</li>
<li role="presentation" class="flex-grow basis-0 text-center">
<a
href="#tabs-contact02"
class="disabled pointer-events-none my-2 block border-x-0 border-b-2 border-t-0 border-transparent bg-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent dark:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-contact02"
role="tab"
aria-controls="tabs-contact02"
aria-selected="false"
>Contact</a
>
</li>
</ul>
<!--Tabs content-->
<div class="mb-6">
<div
class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-home02"
role="tabpanel"
aria-labelledby="tabs-home-tab02"
data-te-tab-active>
Tab 1 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-profile02"
role="tabpanel"
aria-labelledby="tabs-profile-tab02">
Tab 2 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-messages02"
role="tabpanel"
aria-labelledby="tabs-profile-tab02">
Tab 3 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-contact02"
role="tabpanel"
aria-labelledby="tabs-contact-tab02">
Tab 4 content
</div>
</div>
// Initialization for ES Users
import {
Tab,
initTE,
} from "tw-elements";
initTE({ Tab });
Vertical
Make vertical tabs instead of default horizontal ones.
<!--Tabs navigation-->
<ul
class="mr-4 flex list-none flex-col flex-wrap pl-0"
role="tablist"
data-te-nav-ref>
<li role="presentation" class="flex-grow text-center">
<a
href="#tabs-home03"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-home03"
data-te-nav-active
role="tab"
aria-controls="tabs-home03"
aria-selected="true"
>Home</a
>
</li>
<li role="presentation" class="flex-grow text-center">
<a
href="#tabs-profile03"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-profile03"
role="tab"
aria-controls="tabs-profile03"
aria-selected="false"
>Profile</a
>
</li>
<li role="presentation" class="flex-grow text-center">
<a
href="#tabs-messages03"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-messages03"
role="tab"
aria-controls="tabs-messages03"
aria-selected="false"
>Messages</a
>
</li>
<li role="presentation" class="flex-grow text-center">
<a
href="#tabs-contact03"
class="disabled pointer-events-none my-2 block border-x-0 border-b-2 border-t-0 border-transparent bg-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent dark:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-contact03"
role="tab"
aria-controls="tabs-contact03"
aria-selected="false"
>Contact</a
>
</li>
</ul>
<!--Tabs content-->
<div class="my-2">
<div
class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-home03"
role="tabpanel"
aria-labelledby="tabs-home-tab03"
data-te-tab-active>
Tab 1 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-profile03"
role="tabpanel"
aria-labelledby="tabs-profile-tab03">
Tab 2 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-messages03"
role="tabpanel"
aria-labelledby="tabs-profile-tab03">
Tab 3 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-contact03"
role="tabpanel"
aria-labelledby="tabs-contact-tab03">
Tab 4 content
</div>
</div>
// Initialization for ES Users
import {
Tab,
initTE,
} from "tw-elements";
initTE({ Tab });
Pills with buttons
You can also use buttons instead of tabs to change the visible content.
<!--Tabs navigation-->
<ul
class="mb-4 flex list-none flex-row flex-wrap border-b-0 pl-0"
id="tabs-tab3"
role="tablist"
data-te-nav-ref>
<li role="presentation">
<a
href="#tabs-home3"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
id="tabs-home-tab3"
data-te-toggle="pill"
data-te-target="#tabs-home3"
data-te-nav-active
role="tab"
aria-controls="tabs-home3"
aria-selected="true"
>Home</a
>
</li>
<li role="presentation">
<a
href="#tabs-profile3"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
id="tabs-profile-tab3"
data-te-toggle="pill"
data-te-target="#tabs-profile3"
role="tab"
aria-controls="tabs-profile3"
aria-selected="false"
>Profile</a
>
</li>
<li role="presentation">
<a
href="#tabs-messages3"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
id="tabs-messages-tab3"
data-te-toggle="pill"
data-te-target="#tabs-messages3"
role="tab"
aria-controls="tabs-messages3"
aria-selected="false"
>Messages</a
>
</li>
</ul>
<!--Tabs content-->
<div>
<div
class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-home3"
role="tabpanel"
data-te-tab-active
aria-labelledby="tabs-home-tab3">
Tab 1 content button version
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-profile3"
role="tabpanel"
aria-labelledby="tabs-profile-tab3">
Tab 2 content button version
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-messages3"
role="tabpanel"
aria-labelledby="tabs-profile-tab3">
Tab 3 content button version
</div>
</div>
// Initialization for ES Users
import {
Tab,
initTE,
} from "tw-elements";
initTE({ Tab });
Color options
You can use each color from our color palette within the pills.
<!--Tabs navigation for primary color-->
<ul
class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0"
role="tablist"
data-te-nav-ref>
<li role="presentation">
<a
href="#tabs-home0"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-home0"
data-te-nav-active
role="tab"
aria-controls="tabs-home0"
aria-selected="true"
>Home</a
>
</li>
<li role="presentation">
<a
href="#tabs-profile0"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-profile0"
role="tab"
aria-controls="tabs-profile0"
aria-selected="false"
>Profile</a
>
</li>
<li role="presentation">
<a
href="#tabs-messages0"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-toggle="pill"
data-te-target="#tabs-messages0"
role="tab"
aria-controls="tabs-messages0"
aria-selected="false"
>Messages</a
>
</li>
<li role="presentation">
<a
href="#tabs-contact0"
class="disabled pointer-events-none my-2 block border-x-0 border-b-2 border-t-0 border-transparent bg-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent dark:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-contact0"
role="tab"
aria-controls="tabs-contact0"
aria-selected="false"
>Contact</a
>
</li>
</ul>
<!--Tabs content for primary color-->
<div class="mb-6">
<div
class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-home0"
role="tabpanel"
aria-labelledby="tabs-home-tab0"
data-te-tab-active>
Tab 1 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-profile0"
role="tabpanel"
aria-labelledby="tabs-profile-tab0">
Tab 2 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-messages0"
role="tabpanel"
aria-labelledby="tabs-profile-tab0">
Tab 3 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-contact0"
role="tabpanel"
aria-labelledby="tabs-contact-tab0">
Tab 4 content
</div>
</div>
<!--Tabs navigation for secondary color-->
<ul
class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0"
role="tablist"
data-te-nav-ref>
<li role="presentation">
<a
href="#tabs-home1"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-secondary data-[te-nav-active]:text-secondary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-secondary"
data-te-toggle="pill"
data-te-target="#tabs-home1"
data-te-nav-active
role="tab"
aria-controls="tabs-home1"
aria-selected="true"
>Home</a
>
</li>
<li role="presentation">
<a
href="#tabs-profile1"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-secondary data-[te-nav-active]:text-secondary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-secondary"
data-te-toggle="pill"
data-te-target="#tabs-profile1"
role="tab"
aria-controls="tabs-profile1"
aria-selected="false"
>Profile</a
>
</li>
<li role="presentation">
<a
href="#tabs-messages1"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-secondary data-[te-nav-active]:text-secondary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-secondary"
data-te-toggle="pill"
data-te-target="#tabs-messages1"
role="tab"
aria-controls="tabs-messages1"
aria-selected="false"
>Messages</a
>
</li>
<li role="presentation">
<a
href="#tabs-contact1"
class="disabled pointer-events-none my-2 block border-x-0 border-b-2 border-t-0 border-transparent bg-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent dark:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-contact1"
role="tab"
aria-controls="tabs-contact1"
aria-selected="false"
>Contact</a
>
</li>
</ul>
<!--Tabs content for secondary color-->
<div class="mb-6">
<div
class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-home1"
role="tabpanel"
aria-labelledby="tabs-home-tab1"
data-te-tab-active>
Tab 1 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-profile1"
role="tabpanel"
aria-labelledby="tabs-profile-tab1">
Tab 2 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-messages1"
role="tabpanel"
aria-labelledby="tabs-profile-tab1">
Tab 3 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-contact1"
role="tabpanel"
aria-labelledby="tabs-contact-tab1">
Tab 4 content
</div>
</div>
<!--Tabs navigation for success color-->
<ul
class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0"
role="tablist"
data-te-nav-ref>
<li role="presentation">
<a
href="#tabs-home2"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-success data-[te-nav-active]:text-success dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-success"
data-te-toggle="pill"
data-te-target="#tabs-home2"
data-te-nav-active
role="tab"
aria-controls="tabs-home2"
aria-selected="true"
>Home</a
>
</li>
<li role="presentation">
<a
href="#tabs-profile2"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-success data-[te-nav-active]:text-success dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-success"
data-te-toggle="pill"
data-te-target="#tabs-profile2"
role="tab"
aria-controls="tabs-profile2"
aria-selected="false"
>Profile</a
>
</li>
<li role="presentation">
<a
href="#tabs-messages2"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-success data-[te-nav-active]:text-success dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-success"
data-te-toggle="pill"
data-te-target="#tabs-messages2"
role="tab"
aria-controls="tabs-messages2"
aria-selected="false"
>Messages</a
>
</li>
<li role="presentation">
<a
href="#tabs-contact2"
class="disabled pointer-events-none my-2 block border-x-0 border-b-2 border-t-0 border-transparent bg-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent dark:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-contact2"
role="tab"
aria-controls="tabs-contact2"
aria-selected="false"
>Contact</a
>
</li>
</ul>
<!--Tabs content for success color-->
<div class="mb-6">
<div
class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-home2"
role="tabpanel"
aria-labelledby="tabs-home-tab2"
data-te-tab-active>
Tab 1 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-profile2"
role="tabpanel"
aria-labelledby="tabs-profile-tab2">
Tab 2 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-messages2"
role="tabpanel"
aria-labelledby="tabs-profile-tab2">
Tab 3 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-contact2"
role="tabpanel"
aria-labelledby="tabs-contact-tab2">
Tab 4 content
</div>
</div>
<!--Tabs navigation for danger color-->
<ul
class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0"
role="tablist"
data-te-nav-ref>
<li role="presentation">
<a
href="#tabs-home3"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-danger data-[te-nav-active]:text-danger dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-danger"
data-te-toggle="pill"
data-te-target="#tabs-home3"
data-te-nav-active
role="tab"
aria-controls="tabs-home3"
aria-selected="true"
>Home</a
>
</li>
<li role="presentation">
<a
href="#tabs-profile3"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-danger data-[te-nav-active]:text-danger dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-danger"
data-te-toggle="pill"
data-te-target="#tabs-profile3"
role="tab"
aria-controls="tabs-profile3"
aria-selected="false"
>Profile</a
>
</li>
<li role="presentation">
<a
href="#tabs-messages3"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-danger data-[te-nav-active]:text-danger dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-danger"
data-te-toggle="pill"
data-te-target="#tabs-messages3"
role="tab"
aria-controls="tabs-messages3"
aria-selected="false"
>Messages</a
>
</li>
<li role="presentation">
<a
href="#tabs-contact3"
class="disabled pointer-events-none my-2 block border-x-0 border-b-2 border-t-0 border-transparent bg-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent dark:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-contact3"
role="tab"
aria-controls="tabs-contact3"
aria-selected="false"
>Contact</a
>
</li>
</ul>
<!--Tabs content for danger color-->
<div class="mb-6">
<div
class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-home3"
role="tabpanel"
aria-labelledby="tabs-home-tab3"
data-te-tab-active>
Tab 1 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-profile3"
role="tabpanel"
aria-labelledby="tabs-profile-tab3">
Tab 2 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-messages3"
role="tabpanel"
aria-labelledby="tabs-profile-tab3">
Tab 3 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-contact3"
role="tabpanel"
aria-labelledby="tabs-contact-tab3">
Tab 4 content
</div>
</div>
<!--Tabs navigation for warning color-->
<ul
class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0"
role="tablist"
data-te-nav-ref>
<li role="presentation">
<a
href="#tabs-home4"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-warning data-[te-nav-active]:text-warning dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-warning"
data-te-toggle="pill"
data-te-target="#tabs-home4"
data-te-nav-active
role="tab"
aria-controls="tabs-home4"
aria-selected="true"
>Home</a
>
</li>
<li role="presentation">
<a
href="#tabs-profile4"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-warning data-[te-nav-active]:text-warning dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-warning"
data-te-toggle="pill"
data-te-target="#tabs-profile4"
role="tab"
aria-controls="tabs-profile4"
aria-selected="false"
>Profile</a
>
</li>
<li role="presentation">
<a
href="#tabs-messages4"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-warning data-[te-nav-active]:text-warning dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-warning"
data-te-toggle="pill"
data-te-target="#tabs-messages4"
role="tab"
aria-controls="tabs-messages4"
aria-selected="false"
>Messages</a
>
</li>
<li role="presentation">
<a
href="#tabs-contact4"
class="disabled pointer-events-none my-2 block border-x-0 border-b-2 border-t-0 border-transparent bg-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent dark:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-contact4"
role="tab"
aria-controls="tabs-contact4"
aria-selected="false"
>Contact</a
>
</li>
</ul>
<!--Tabs content for warning color-->
<div class="mb-6">
<div
class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-home4"
role="tabpanel"
aria-labelledby="tabs-home-tab4"
data-te-tab-active>
Tab 1 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-profile4"
role="tabpanel"
aria-labelledby="tabs-profile-tab4">
Tab 2 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-messages4"
role="tabpanel"
aria-labelledby="tabs-profile-tab4">
Tab 3 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-contact4"
role="tabpanel"
aria-labelledby="tabs-contact-tab4">
Tab 4 content
</div>
</div>
<!--Tabs navigation for info color-->
<ul
class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0"
role="tablist"
data-te-nav-ref>
<li role="presentation">
<a
href="#tabs-home5"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-info data-[te-nav-active]:text-info dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-info"
data-te-toggle="pill"
data-te-target="#tabs-home5"
data-te-nav-active
role="tab"
aria-controls="tabs-home5"
aria-selected="true"
>Home</a
>
</li>
<li role="presentation">
<a
href="#tabs-profile5"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-info data-[te-nav-active]:text-info dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-info"
data-te-toggle="pill"
data-te-target="#tabs-profile5"
role="tab"
aria-controls="tabs-profile5"
aria-selected="false"
>Profile</a
>
</li>
<li role="presentation">
<a
href="#tabs-messages5"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-info data-[te-nav-active]:text-info dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-info"
data-te-toggle="pill"
data-te-target="#tabs-messages5"
role="tab"
aria-controls="tabs-messages5"
aria-selected="false"
>Messages</a
>
</li>
<li role="presentation">
<a
href="#tabs-contact5"
class="disabled pointer-events-none my-2 block border-x-0 border-b-2 border-t-0 border-transparent bg-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent dark:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-contact5"
role="tab"
aria-controls="tabs-contact5"
aria-selected="false"
>Contact</a
>
</li>
</ul>
<!--Tabs content for info color-->
<div class="mb-6">
<div
class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-home5"
role="tabpanel"
aria-labelledby="tabs-home-tab5"
data-te-tab-active>
Tab 1 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-profile5"
role="tabpanel"
aria-labelledby="tabs-profile-tab5">
Tab 2 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-messages5"
role="tabpanel"
aria-labelledby="tabs-profile-tab5">
Tab 3 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-contact5"
role="tabpanel"
aria-labelledby="tabs-contact-tab5">
Tab 4 content
</div>
</div>
<!--Tabs navigation for neutral-50 color-->
<ul
class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0"
role="tablist"
data-te-nav-ref>
<li role="presentation">
<a
href="#tabs-home6"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-neutral-50 data-[te-nav-active]:text-neutral-50 dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-neutral-50"
data-te-toggle="pill"
data-te-target="#tabs-home6"
data-te-nav-active
role="tab"
aria-controls="tabs-home6"
aria-selected="true"
>Home</a
>
</li>
<li role="presentation">
<a
href="#tabs-profile6"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-neutral-50 data-[te-nav-active]:text-neutral-50 dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-neutral-50"
data-te-toggle="pill"
data-te-target="#tabs-profile6"
role="tab"
aria-controls="tabs-profile6"
aria-selected="false"
>Profile</a
>
</li>
<li role="presentation">
<a
href="#tabs-messages6"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-neutral-50 data-[te-nav-active]:text-neutral-50 dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:text-neutral-50"
data-te-toggle="pill"
data-te-target="#tabs-messages6"
role="tab"
aria-controls="tabs-messages6"
aria-selected="false"
>Messages</a
>
</li>
<li role="presentation">
<a
href="#tabs-contact6"
class="disabled pointer-events-none my-2 block border-x-0 border-b-2 border-t-0 border-transparent bg-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent dark:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-contact5"
role="tab"
aria-controls="tabs-contact1"
aria-selected="false"
>Contact</a
>
</li>
</ul>
<!--Tabs content for neutral-50 color-->
<div class="mb-6">
<div
class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-home6"
role="tabpanel"
aria-labelledby="tabs-home-tab6"
data-te-tab-active>
Tab 1 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-profile6"
role="tabpanel"
aria-labelledby="tabs-profile-tab6">
Tab 2 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-messages6"
role="tabpanel"
aria-labelledby="tabs-profile-tab6">
Tab 3 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-contact6"
role="tabpanel"
aria-labelledby="tabs-contact-tab6">
Tab 4 content
</div>
</div>
<!--Tabs navigation for neutral-800 color-->
<ul
class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0"
role="tablist"
data-te-nav-ref>
<li role="presentation">
<a
href="#tabs-home7"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-neutral-800 data-[te-nav-active]:text-neutral-800 dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-neutral-600 dark:data-[te-nav-active]:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-home7"
data-te-nav-active
role="tab"
aria-controls="tabs-home7"
aria-selected="true"
>Home</a
>
</li>
<li role="presentation">
<a
href="#tabs-profile7"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-neutral-800 data-[te-nav-active]:text-neutral-800 dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-neutral-600 dark:data-[te-nav-active]:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-profile7"
role="tab"
aria-controls="tabs-profile7"
aria-selected="false"
>Profile</a
>
</li>
<li role="presentation">
<a
href="#tabs-messages7"
class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-neutral-800 data-[te-nav-active]:text-neutral-800 dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-neutral-600 dark:data-[te-nav-active]:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-messages7"
role="tab"
aria-controls="tabs-messages7"
aria-selected="false"
>Messages</a
>
</li>
<li role="presentation">
<a
href="#tabs-contact7"
class="disabled pointer-events-none my-2 block border-x-0 border-b-2 border-t-0 border-transparent bg-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent dark:text-neutral-600"
data-te-toggle="pill"
data-te-target="#tabs-contact7"
role="tab"
aria-controls="tabs-contact7"
aria-selected="false"
>Contact</a
>
</li>
</ul>
<!--Tabs content for neutral-800 color-->
<div class="mb-6">
<div
class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-home7"
role="tabpanel"
aria-labelledby="tabs-home-tab7"
data-te-tab-active>
Tab 1 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-profile7"
role="tabpanel"
aria-labelledby="tabs-profile-tab7">
Tab 2 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-messages7"
role="tabpanel"
aria-labelledby="tabs-profile-tab7">
Tab 3 content
</div>
<div
class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
id="tabs-contact7"
role="tabpanel"
aria-labelledby="tabs-contact-tab7">
Tab 4 content
</div>
</div>
// Initialization for ES Users
import {
Tab,
initTE,
} from "tw-elements";
initTE({ Tab });