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 ps-0"
        role="tablist"
        data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-target="#tabs-home"
            data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="tabs-home"
          role="tabpanel"
          aria-labelledby="tabs-home-tab"
          data-twe-tab-active>
          Tab 1 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-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-[twe-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-[twe-tab-active]:block"
          id="tabs-contact"
          role="tabpanel"
          aria-labelledby="tabs-contact-tab">
          Tab 4 content
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Tab,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Tab });

Hey there 👋 we're excited about TW elements and want to see it grow! 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.

HTML
javascript

        
            
      <!--Tabs navigation-->
      <ul
        class="mb-5 flex list-none flex-row flex-wrap border-b-0 ps-0"
        role="tablist"
        data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-target="#tabs-home01"
            data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="tabs-home01"
          role="tabpanel"
          aria-labelledby="tabs-home-tab01"
          data-twe-tab-active>
          Tab 1 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-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-[twe-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-[twe-tab-active]:block"
          id="tabs-contact01"
          role="tabpanel"
          aria-labelledby="tabs-contact-tab01">
          Tab 4 content
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Tab,
        initTWE,
      } from "tw-elements";
      
      initTWE({ 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 ps-0"
        role="tablist"
        data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-target="#tabs-home02"
            data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="tabs-home02"
          role="tabpanel"
          aria-labelledby="tabs-home-tab02"
          data-twe-tab-active>
          Tab 1 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-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-[twe-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-[twe-tab-active]:block"
          id="tabs-contact02"
          role="tabpanel"
          aria-labelledby="tabs-contact-tab02">
          Tab 4 content
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Tab,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Tab });

Vertical

Make vertical tabs instead of default horizontal ones.

HTML
javascript

        
            
      <!--Tabs navigation-->
      <ul
        class="me-4 flex list-none flex-col flex-wrap ps-0"
        role="tablist"
        data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-target="#tabs-home03"
            data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="tabs-home03"
          role="tabpanel"
          aria-labelledby="tabs-home-tab03"
          data-twe-tab-active>
          Tab 1 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-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-[twe-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-[twe-tab-active]:block"
          id="tabs-contact03"
          role="tabpanel"
          aria-labelledby="tabs-contact-tab03">
          Tab 4 content
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Tab,
        initTWE,
      } from "tw-elements";
      
      initTWE({ 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 ps-0"
        id="tabs-tab3"
        role="tablist"
        data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            id="tabs-home-tab3"
            data-twe-toggle="pill"
            data-twe-target="#tabs-home3"
            data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            id="tabs-profile-tab3"
            data-twe-toggle="pill"
            data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            id="tabs-messages-tab3"
            data-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="tabs-home3"
          role="tabpanel"
          data-twe-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-[twe-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-[twe-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,
        initTWE,
      } from "tw-elements";
      
      initTWE({ 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 ps-0"
        role="tablist"
        data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-target="#tabs-home0"
            data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-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-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-primary"
            data-twe-toggle="pill"
            data-twe-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="tabs-home0"
          role="tabpanel"
          aria-labelledby="tabs-home-tab0"
          data-twe-tab-active>
          Tab 1 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-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-[twe-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-[twe-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 ps-0"
        role="tablist"
        data-twe-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-[twe-nav-active]:border-secondary data-[twe-nav-active]:text-secondary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-secondary"
            data-twe-toggle="pill"
            data-twe-target="#tabs-home1"
            data-twe-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-[twe-nav-active]:border-secondary data-[twe-nav-active]:text-secondary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-secondary"
            data-twe-toggle="pill"
            data-twe-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-[twe-nav-active]:border-secondary data-[twe-nav-active]:text-secondary dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-secondary"
            data-twe-toggle="pill"
            data-twe-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="tabs-home1"
          role="tabpanel"
          aria-labelledby="tabs-home-tab1"
          data-twe-tab-active>
          Tab 1 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-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-[twe-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-[twe-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 ps-0"
        role="tablist"
        data-twe-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-[twe-nav-active]:border-success data-[twe-nav-active]:text-success dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-success"
            data-twe-toggle="pill"
            data-twe-target="#tabs-home2"
            data-twe-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-[twe-nav-active]:border-success data-[twe-nav-active]:text-success dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-success"
            data-twe-toggle="pill"
            data-twe-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-[twe-nav-active]:border-success data-[twe-nav-active]:text-success dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-success"
            data-twe-toggle="pill"
            data-twe-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="tabs-home2"
          role="tabpanel"
          aria-labelledby="tabs-home-tab2"
          data-twe-tab-active>
          Tab 1 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-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-[twe-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-[twe-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 ps-0"
        role="tablist"
        data-twe-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-[twe-nav-active]:border-danger data-[twe-nav-active]:text-danger dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-danger"
            data-twe-toggle="pill"
            data-twe-target="#tabs-home3"
            data-twe-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-[twe-nav-active]:border-danger data-[twe-nav-active]:text-danger dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-danger"
            data-twe-toggle="pill"
            data-twe-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-[twe-nav-active]:border-danger data-[twe-nav-active]:text-danger dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-danger"
            data-twe-toggle="pill"
            data-twe-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="tabs-home3"
          role="tabpanel"
          aria-labelledby="tabs-home-tab3"
          data-twe-tab-active>
          Tab 1 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-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-[twe-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-[twe-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 ps-0"
        role="tablist"
        data-twe-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-[twe-nav-active]:border-warning data-[twe-nav-active]:text-warning dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-warning"
            data-twe-toggle="pill"
            data-twe-target="#tabs-home4"
            data-twe-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-[twe-nav-active]:border-warning data-[twe-nav-active]:text-warning dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-warning"
            data-twe-toggle="pill"
            data-twe-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-[twe-nav-active]:border-warning data-[twe-nav-active]:text-warning dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-warning"
            data-twe-toggle="pill"
            data-twe-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="tabs-home4"
          role="tabpanel"
          aria-labelledby="tabs-home-tab4"
          data-twe-tab-active>
          Tab 1 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-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-[twe-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-[twe-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 ps-0"
        role="tablist"
        data-twe-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-[twe-nav-active]:border-info data-[twe-nav-active]:text-info dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-info"
            data-twe-toggle="pill"
            data-twe-target="#tabs-home5"
            data-twe-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-[twe-nav-active]:border-info data-[twe-nav-active]:text-info dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-info"
            data-twe-toggle="pill"
            data-twe-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-[twe-nav-active]:border-info data-[twe-nav-active]:text-info dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:text-info"
            data-twe-toggle="pill"
            data-twe-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="tabs-home5"
          role="tabpanel"
          aria-labelledby="tabs-home-tab5"
          data-twe-tab-active>
          Tab 1 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-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-[twe-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-[twe-tab-active]:block"
          id="tabs-contact5"
          role="tabpanel"
          aria-labelledby="tabs-contact-tab5">
          Tab 4 content
        </div>
      </div>

      <!--Tabs navigation for dark color-->
      <ul
        class="mb-5 flex list-none flex-row flex-wrap border-b-0 ps-0"
        role="tablist"
        data-twe-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-[twe-nav-active]:border-neutral-800 data-[twe-nav-active]:text-neutral-800 dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:border-neutral-600 dark:data-[twe-nav-active]:text-neutral-600"
            data-twe-toggle="pill"
            data-twe-target="#tabs-home7"
            data-twe-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-[twe-nav-active]:border-neutral-800 data-[twe-nav-active]:text-neutral-800 dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:border-neutral-600 dark:data-[twe-nav-active]:text-neutral-600"
            data-twe-toggle="pill"
            data-twe-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-[twe-nav-active]:border-neutral-800 data-[twe-nav-active]:text-neutral-800 dark:text-white/50 dark:hover:bg-neutral-700/60 dark:data-[twe-nav-active]:border-neutral-600 dark:data-[twe-nav-active]:text-neutral-600"
            data-twe-toggle="pill"
            data-twe-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-twe-toggle="pill"
            data-twe-target="#tabs-contact7"
            role="tab"
            aria-controls="tabs-contact7"
            aria-selected="false"
            >Contact</a
          >
        </li>
      </ul>

      <!--Tabs content for dark color-->
      <div class="mb-6">
        <div
          class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[twe-tab-active]:block"
          id="tabs-home7"
          role="tabpanel"
          aria-labelledby="tabs-home-tab7"
          data-twe-tab-active>
          Tab 1 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-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-[twe-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-[twe-tab-active]:block"
          id="tabs-contact7"
          role="tabpanel"
          aria-labelledby="tabs-contact-tab7">
          Tab 4 content
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Tab,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Tab });

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.twe.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.twe.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.twe.tab`	This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).
`hide.twe.tab`	This event is fired immediately when the `hide` instance method has been called.
`hidden.twe.tab`	This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).

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

Access restricted

To view this section you must have an active PRO account

Tabs

Tailwind CSS Tabs

Basic example

Fill

Justify

Vertical

Pills with buttons

Color options

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Tabs - API

Import

Usage

Regarding accessibility

Via data attributes

Via JavaScript

Classes

Methods

Events