Tailwind CSS Tabs

Responsive Tabs built with Tailwind CSS. Learn how to use tabs to create content that can be hidden & activated onclick, examples like switch, vertical & more.

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.

HTML
javascript

        
            
      <!--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="focus:border-transparen 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 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!

Share via Reddit Share via StumbleUpon

Fill

Stretch the tab list to fit the container.

HTML
javascript

        
            
      <!--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="focus:border-transparen 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 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.

HTML
javascript

        
            
      <!--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="focus:border-transparen 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 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.

HTML
javascript

        
            
      <!--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="focus:border-transparen 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 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.

HTML
javascript

        
            
      <!--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="focus:border-transparen 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 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="focus:border-transparen 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 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.

HTML
javascript

        
            
      <!--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="focus:border-transparen 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 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="focus:border-transparen 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 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="focus:border-transparen 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 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="focus:border-transparen 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 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="focus:border-transparen 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 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="focus:border-transparen 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 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="focus:border-transparen 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 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 });

If you are looking for more advanced options, try Bootstrap Tabs from MDBootstrap.

Name	Default	Description
`hide`	opacity-0	Sets styles for hidden tab.
`show`	opacity-100	Sets styles for visible tab.

Method	Description	Example
`show`	Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the shown.te.tab event occurs).	`instance.show()`
`dispose`	Destroys an element’s tab.	`instance.hide()`
`getInstance`	Static method which allows you to get the tooltip instance associated with a DOM element.	`Tab.getInstance(someTabTriggerEl)`

Event type	Description
`show.te.tab`	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
`shown.te.tab`	This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).
`hide.te.tab`	This event is fired immediately when the `hide` instance method has been called.
`hidden.te.tab`	This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).
`inserted.te.tab`	This event is fired after the `show.te.tab` event when the tooltip template has been added to the DOM.

Tabs

Basic example

Fill

Justify

Vertical

Pills with buttons

Color options

Tabs - API

Import

Usage

Regarding accessibility

Via data attributes

Via JavaScript

Classes

Methods

Events

Tabs

Tailwind CSS Tabs

Basic example

Fill

Justify

Vertical

Pills with buttons

Color options

Related resources

Tabs - API

Import

Usage

Regarding accessibility

Via data attributes

Via JavaScript

Classes

Methods

Events