Tailwind CSS Pills

Use responsive pills component with helper examples for nav pills, pills color, alignment (center, fill or justify), stacked, vertical & more. Easy to customize.

Basic example

With the basic example od pills component you can navigate between groups of content that are related and at the same level of hierarchy.

Use basic example with pills.

HTML
javascript

        
            
      <!--Pills navigation-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap pl-0 md:flex-row"
        id="pills-tab"
        role="tablist"
        data-te-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-home-tab"
            data-te-toggle="pill"
            data-te-target="#pills-home"
            data-te-nav-active
            role="tab"
            aria-controls="pills-home"
            aria-selected="true"
            >Home</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-profile"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-profile-tab"
            data-te-toggle="pill"
            data-te-target="#pills-profile"
            role="tab"
            aria-controls="pills-profile"
            aria-selected="false"
            >Profile</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-contact"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-contact-tab"
            data-te-toggle="pill"
            data-te-target="#pills-contact"
            role="tab"
            aria-controls="pills-contact"
            aria-selected="false"
            >Contact</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-disabled"
            class="pointer-events-none my-2 block rounded bg-neutral-200 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:bg-neutral-600 dark:text-neutral-500"
            id="pills-disabled-tab"
            data-te-toggle="pill"
            data-te-target="#pills-disabled"
            role="tab"
            aria-controls="pills-disabled"
            aria-selected="false"
            >Disabled</a
          >
        </li>
      </ul>

      <!--Pills content-->
      <div class="mb-6">
        <div
          class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-home"
          role="tabpanel"
          aria-labelledby="pills-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="pills-profile"
          role="tabpanel"
          aria-labelledby="pills-profile-tab">
          Tab 2 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-contact"
          role="tabpanel"
          aria-labelledby="pills-contact-tab">
          Tab 3 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-disabled"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab">
          Tab 4 disabled
        </div>
      </div>

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

Hey there 👋 we want to make TW 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 pills to fit the container.

HTML
Javascript

        
            
      <!--Pills navigation-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap pl-0 md:flex-row"
        role="tablist"
        data-te-nav-ref>
        <li role="presentation" class="flex-auto text-center">
          <a
            href="#pills-home01"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-home-tab01"
            data-te-toggle="pill"
            data-te-target="#pills-home01"
            data-te-nav-active
            role="tab"
            aria-controls="pills-home01"
            aria-selected="true"
            >Home</a
          >
        </li>
        <li role="profile" class="flex-auto text-center">
          <a
            href="#pills-profile01"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-profile-tab01"
            data-te-toggle="pill"
            data-te-target="#pills-profile01"
            role="tab"
            aria-controls="pills-profile01"
            aria-selected="false"
            >Profile</a
          >
        </li>
        <li role="contact" class="flex-auto text-center">
          <a
            href="#pills-contact01"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-contact-tab01"
            data-te-toggle="pill"
            data-te-target="#pills-contact01"
            role="tab"
            aria-controls="pills-contact01"
            aria-selected="false"
            >Contact</a
          >
        </li>
        <li role="disabled" class="flex-auto text-center">
          <a
            href="#pills-disabled01"
            class="pointer-events-none my-2 block rounded bg-neutral-200 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:bg-neutral-600 dark:text-neutral-500"
            id="pills-disabled-tab01"
            data-te-toggle="pill"
            data-te-target="#pills-disabled01"
            role="tab"
            aria-controls="pills-disabled01"
            aria-selected="false"
            >Disabled</a
          >
        </li>
      </ul>

      <!--Pills content-->
      <div class="mb-6">
        <div
          class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-home01"
          role="tabpanel"
          aria-labelledby="pills-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="pills-profile01"
          role="tabpanel"
          aria-labelledby="pills-profile-tab01">
          Tab 2 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-contact01"
          role="tabpanel"
          aria-labelledby="pills-contact-tab01">
          Tab 3 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-disabled01"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab01">
          Tab 4 disabled
        </div>
      </div>

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

Justify

Arrange pills in a grid to stretch the entire width of the parent element.

HTML
javascript

        
            
      <!--Pills navigation-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap pl-0 md:flex-row"
        role="tablist"
        data-te-nav-ref>
        <li role="presentation" class="flex-grow basis-0 text-center">
          <a
            href="#pills-home02"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-home-tab02"
            data-te-toggle="pill"
            data-te-target="#pills-home02"
            data-te-nav-active
            role="tab"
            aria-controls="pills-home02"
            aria-selected="true"
            >Home</a
          >
        </li>
        <li role="profile" class="flex-grow basis-0 text-center">
          <a
            href="#pills-profile02"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-profile-tab02"
            data-te-toggle="pill"
            data-te-target="#pills-profile02"
            role="tab"
            aria-controls="pills-profile02"
            aria-selected="false"
            >Profile</a
          >
        </li>
        <li role="contact" class="flex-grow basis-0 text-center">
          <a
            href="#pills-contact02"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-contact-tab02"
            data-te-toggle="pill"
            data-te-target="#pills-contact02"
            role="tab"
            aria-controls="pills-contact02"
            aria-selected="false"
            >Contact</a
          >
        </li>
        <li role="disabled" class="flex-grow basis-0 text-center">
          <a
            href="#pills-disabled02"
            class="pointer-events-none my-2 block rounded bg-neutral-200 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:bg-neutral-600 dark:text-neutral-500"
            id="pills-disabled-tab02"
            data-te-toggle="pill"
            data-te-target="#pills-disabled02"
            role="tab"
            aria-controls="pills-disabled02"
            aria-selected="false"
            >Disabled</a
          >
        </li>
      </ul>

      <!--Pills content-->
      <div class="mb-6">
        <div
          class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-home02"
          role="tabpanel"
          aria-labelledby="pills-home-tab02"
          data-te-tab-active>
          Tab 1 content justified
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-profile02"
          role="tabpanel"
          aria-labelledby="pills-profile-tab02">
          Tab 2 content justified
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-contact02"
          role="tabpanel"
          aria-labelledby="pills-contact-tab02">
          Tab 3 content justified
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-disabled02"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab02">
          Tab 4 disabled justified
        </div>
      </div>

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

Vertical

Make vertical pills instead of default horizontal ones.

HTML
javascript

        
            
      <!--Pills navigation-->
      <div class="flex items-start">
        <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="#pills-home03"
              class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700"
              id="pills-home-tab03"
              data-te-toggle="pill"
              data-te-target="#pills-home03"
              data-te-nav-active
              role="tab"
              aria-controls="pills-home03"
              aria-selected="true"
              >Home</a
            >
          </li>
          <li role="profile" class="flex-grow text-center">
            <a
              href="#pills-profile03"
              class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700"
              id="pills-profile-tab03"
              data-te-toggle="pill"
              data-te-target="#pills-profile03"
              role="tab"
              aria-controls="pills-profile03"
              aria-selected="false"
              >Profile</a
            >
          </li>
          <li role="contact" class="flex-grow text-center">
            <a
              href="#pills-contact03"
              class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700"
              id="pills-contact-tab03"
              data-te-toggle="pill"
              data-te-target="#pills-contact03"
              role="tab"
              aria-controls="pills-contact03"
              aria-selected="false"
              >Contact</a
            >
          </li>
          <li role="disabled" class="flex-grow text-center">
            <a
              href="#pills-disabled03"
              class="pointer-events-none my-2 block rounded bg-neutral-200 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:bg-neutral-600 dark:text-neutral-500"
              id="pills-disabled-tab03"
              data-te-toggle="pill"
              data-te-target="#pills-disabled03"
              role="tab"
              aria-controls="pills-disabled03"
              aria-selected="false"
              >Disabled</a
            >
          </li>
        </ul>

        <!--Pills content-->
        <div class="my-2">
          <div
            class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
            id="pills-home03"
            role="tabpanel"
            aria-labelledby="pills-home-tab03"
            data-te-tab-active>
            Tab 1 content vertical
          </div>
          <div
            class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
            id="pills-profile03"
            role="tabpanel"
            aria-labelledby="pills-profile-tab03">
            Tab 2 content vertical
          </div>
          <div
            class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
            id="pills-contact03"
            role="tabpanel"
            aria-labelledby="pills-contact-tab03">
            Tab 3 content vertical
          </div>
          <div
            class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
            id="pills-disabled03"
            role="tabpanel"
            aria-labelledby="pills-disabled-tab03">
            Tab 4 disabled vertical
          </div>
        </div>
      </div>

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

Pills with buttons

Use buttons instead of pills to change the visible content.

HTML
javascript

        
            
      <!--Pills navigation-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap pl-0 md:flex-row"
        role="tablist"
        data-te-nav-ref>
        <li role="presentation">
          <button
            type="button"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-home-tab04"
            data-te-toggle="pill"
            data-te-target="#pills-home04"
            data-te-nav-active
            role="tab"
            aria-controls="pills-home04"
            aria-selected="true">
            Home
          </button>
        </li>
        <li role="presentation">
          <button
            type="button"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-profile-tab04"
            data-te-toggle="pill"
            data-te-target="#pills-profile04"
            role="tab"
            aria-controls="pills-profile04"
            aria-selected="true">
            Profile
          </button>
        </li>
        <li role="presentation">
          <button
            type="button"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-contact-tab04"
            data-te-toggle="pill"
            data-te-target="#pills-contact04"
            role="tab"
            aria-controls="pills-contact04"
            aria-selected="true">
            Contact
          </button>
        </li>
        <li role="presentation">
          <button
            type="button"
            class="pointer-events-none my-2 block rounded bg-neutral-200 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:bg-neutral-600 dark:text-neutral-500"
            id="pills-disabled-tab04"
            data-te-toggle="pill"
            data-te-target="#pills-disabled04"
            data-te-nav-disabled
            role="tab"
            aria-controls="pills-disabled04"
            aria-selected="true">
            Disabled
          </button>
        </li>
      </ul>

      <!--Pills content-->
      <div class="mb-6">
        <div
          class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-home04"
          role="tabpanel"
          aria-labelledby="pills-home-tab04"
          data-te-tab-active>
          Tab 1 content button version
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-profile04"
          role="tabpanel"
          aria-labelledby="pills-profile-tab04">
          Tab 2 content button version
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-contact04"
          role="tabpanel"
          aria-labelledby="pills-contact-tab04">
          Tab 3 content button version
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-disabled04"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab04">
          Tab 4 content button version disabled
        </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

        
            
      <!--Pills navigation for primary color-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap pl-0 md:flex-row"
        role="tablist"
        data-te-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home0"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-home-tab0"
            data-te-toggle="pill"
            data-te-target="#pills-home0"
            data-te-nav-active
            role="tab"
            aria-controls="pills-home0"
            aria-selected="true"
            >Home</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-profile0"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-profile-tab0"
            data-te-toggle="pill"
            data-te-target="#pills-profile0"
            role="tab"
            aria-controls="pills-profile0"
            aria-selected="false"
            >Profile</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-contact0"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
            id="pills-contact-tab0"
            data-te-toggle="pill"
            data-te-target="#pills-contact0"
            role="tab"
            aria-controls="pills-contact0"
            aria-selected="false"
            >Contact</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-disabled0"
            class="pointer-events-none my-2 block rounded bg-neutral-200 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:bg-neutral-600 dark:text-neutral-500"
            id="pills-disabled-tab0"
            data-te-toggle="pill"
            data-te-target="#pills-disabled0"
            role="tab"
            aria-controls="pills-disabled0"
            aria-selected="false"
            >Disabled</a
          >
        </li>
      </ul>

      <!--Pills 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="pills-home0"
          role="tabpanel"
          aria-labelledby="pills-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="pills-profile0"
          role="tabpanel"
          aria-labelledby="pills-profile-tab0">
          Tab 2 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-contact0"
          role="tabpanel"
          aria-labelledby="pills-contact-tab0">
          Tab 3 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-disabled0"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab0">
          Tab 4 disabled
        </div>
      </div>

      <!--Pills navigation for secondary color-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap pl-0 md:flex-row"
        role="tablist"
        data-te-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home1"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-secondary-200 data-[te-nav-active]:text-secondary-900 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-secondary-900 md:mr-4"
            id="pills-home-tab1"
            data-te-toggle="pill"
            data-te-target="#pills-home1"
            data-te-nav-active
            role="tab"
            aria-controls="pills-home1"
            aria-selected="true"
            >Home</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-profile1"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-secondary-200 data-[te-nav-active]:text-secondary-900 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-secondary-900 md:mr-4"
            id="pills-profile-tab1"
            data-te-toggle="pill"
            data-te-target="#pills-profile1"
            role="tab"
            aria-controls="pills-profile1"
            aria-selected="false"
            >Profile</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-contact1"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-secondary-200 data-[te-nav-active]:text-secondary-900 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-secondary-900 md:mr-4"
            id="pills-contact-tab1"
            data-te-toggle="pill"
            data-te-target="#pills-contact1"
            role="tab"
            aria-controls="pills-contact1"
            aria-selected="false"
            >Contact</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-disabled1"
            class="pointer-events-none my-2 block rounded bg-neutral-200 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:bg-neutral-600 dark:text-neutral-500"
            id="pills-disabled-tab1"
            data-te-toggle="pill"
            data-te-target="#pills-disabled1"
            role="tab"
            aria-controls="pills-disabled1"
            aria-selected="false"
            >Disabled</a
          >
        </li>
      </ul>

      <!--Pills 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="pills-home1"
          role="tabpanel"
          aria-labelledby="pills-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="pills-profile1"
          role="tabpanel"
          aria-labelledby="pills-profile-tab1">
          Tab 2 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-contact1"
          role="tabpanel"
          aria-labelledby="pills-contact-tab1">
          Tab 3 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-disabled1"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab1">
          Tab 4 disabled
        </div>
      </div>

      <!--Pills navigation for success color-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap pl-0 md:flex-row"
        role="tablist"
        data-te-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home2"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-success-100 data-[te-nav-active]:text-success-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-success-700 md:mr-4"
            id="pills-home-tab2"
            data-te-toggle="pill"
            data-te-target="#pills-home2"
            data-te-nav-active
            role="tab"
            aria-controls="pills-home2"
            aria-selected="true"
            >Home</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-profile2"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-success-100 data-[te-nav-active]:text-success-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-success-700 md:mr-4"
            id="pills-profile-tab2"
            data-te-toggle="pill"
            data-te-target="#pills-profile2"
            role="tab"
            aria-controls="pills-profile2"
            aria-selected="false"
            >Profile</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-contact2"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-success-100 data-[te-nav-active]:text-success-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-success-700 md:mr-4"
            id="pills-contact-tab2"
            data-te-toggle="pill"
            data-te-target="#pills-contact2"
            role="tab"
            aria-controls="pills-contact2"
            aria-selected="false"
            >Contact</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-disabled2"
            class="pointer-events-none my-2 block rounded bg-neutral-200 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:bg-neutral-600 dark:text-neutral-500"
            id="pills-disabled-tab2"
            data-te-toggle="pill"
            data-te-target="#pills-disabled2"
            role="tab"
            aria-controls="pills-disabled2"
            aria-selected="false"
            >Disabled</a
          >
        </li>
      </ul>

      <!--Pills 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="pills-home2"
          role="tabpanel"
          aria-labelledby="pills-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="pills-profile2"
          role="tabpanel"
          aria-labelledby="pills-profile-tab2">
          Tab 2 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-contact2"
          role="tabpanel"
          aria-labelledby="pills-contact-tab2">
          Tab 3 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-disabled2"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab2">
          Tab 4 disabled
        </div>
      </div>

      <!--Pills navigation for danger color-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap pl-0 md:flex-row"
        role="tablist"
        data-te-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home3"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-danger-100 data-[te-nav-active]:text-danger-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-danger-700 md:mr-4"
            id="pills-home-tab3"
            data-te-toggle="pill"
            data-te-target="#pills-home3"
            data-te-nav-active
            role="tab"
            aria-controls="pills-home3"
            aria-selected="true"
            >Home</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-profile3"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-danger-100 data-[te-nav-active]:text-danger-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-danger-700 md:mr-4"
            id="pills-profile-tab3"
            data-te-toggle="pill"
            data-te-target="#pills-profile3"
            role="tab"
            aria-controls="pills-profile3"
            aria-selected="false"
            >Profile</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-contact3"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-danger-100 data-[te-nav-active]:text-danger-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-danger-700 md:mr-4"
            id="pills-contact-tab3"
            data-te-toggle="pill"
            data-te-target="#pills-contact3"
            role="tab"
            aria-controls="pills-contact3"
            aria-selected="false"
            >Contact</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-disabled3"
            class="pointer-events-none my-2 block rounded bg-neutral-200 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:bg-neutral-600 dark:text-neutral-500"
            id="pills-disabled-tab3"
            data-te-toggle="pill"
            data-te-target="#pills-disabled3"
            role="tab"
            aria-controls="pills-disabled3"
            aria-selected="false"
            >Disabled</a
          >
        </li>
      </ul>

      <!--Pills 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="pills-home3"
          role="tabpanel"
          aria-labelledby="pills-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="pills-profile3"
          role="tabpanel"
          aria-labelledby="pills-profile-tab3">
          Tab 2 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-contact3"
          role="tabpanel"
          aria-labelledby="pills-contact-tab3">
          Tab 3 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-disabled3"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab3">
          Tab 4 disabled
        </div>
      </div>

      <!--Pills navigation for warning color-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap pl-0 md:flex-row"
        role="tablist"
        data-te-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home4"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-warning-100 data-[te-nav-active]:text-warning-800 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-warning-800 md:mr-4"
            id="pills-home-tab4"
            data-te-toggle="pill"
            data-te-target="#pills-home4"
            data-te-nav-active
            role="tab"
            aria-controls="pills-home4"
            aria-selected="true"
            >Home</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-profile4"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-warning-100 data-[te-nav-active]:text-warning-800 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-warning-800 md:mr-4"
            id="pills-profile-tab4"
            data-te-toggle="pill"
            data-te-target="#pills-profile4"
            role="tab"
            aria-controls="pills-profile4"
            aria-selected="false"
            >Profile</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-contact4"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-warning-100 data-[te-nav-active]:text-warning-800 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-warning-800 md:mr-4"
            id="pills-contact-tab4"
            data-te-toggle="pill"
            data-te-target="#pills-contact4"
            role="tab"
            aria-controls="pills-contact4"
            aria-selected="false"
            >Contact</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-disabled4"
            class="pointer-events-none my-2 block rounded bg-neutral-200 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:bg-neutral-600 dark:text-neutral-500"
            id="pills-disabled-tab4"
            data-te-toggle="pill"
            data-te-target="#pills-disabled4"
            role="tab"
            aria-controls="pills-disabled4"
            aria-selected="false"
            >Disabled</a
          >
        </li>
      </ul>

      <!--Pills 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="pills-home4"
          role="tabpanel"
          aria-labelledby="pills-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="pills-profile4"
          role="tabpanel"
          aria-labelledby="pills-profile-tab4">
          Tab 2 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-contact4"
          role="tabpanel"
          aria-labelledby="pills-contact-tab4">
          Tab 3 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-disabled4"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab4">
          Tab 4 disabled
        </div>
      </div>

      <!--Pills navigation for info color-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap pl-0 md:flex-row"
        role="tablist"
        data-te-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home5"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-info-100 data-[te-nav-active]:text-info-800 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-info-800 md:mr-4"
            id="pills-home-tab5"
            data-te-toggle="pill"
            data-te-target="#pills-home5"
            data-te-nav-active
            role="tab"
            aria-controls="pills-home5"
            aria-selected="true"
            >Home</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-profile5"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-info-100 data-[te-nav-active]:text-info-800 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-info-800 md:mr-4"
            id="pills-profile-tab5"
            data-te-toggle="pill"
            data-te-target="#pills-profile5"
            role="tab"
            aria-controls="pills-profile5"
            aria-selected="false"
            >Profile</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-contact5"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-info-100 data-[te-nav-active]:text-info-800 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-info-800 md:mr-4"
            id="pills-contact-tab5"
            data-te-toggle="pill"
            data-te-target="#pills-contact5"
            role="tab"
            aria-controls="pills-contact5"
            aria-selected="false"
            >Contact</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-disabled5"
            class="pointer-events-none my-2 block rounded bg-neutral-200 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:bg-neutral-600 dark:text-neutral-500"
            id="pills-disabled-tab5"
            data-te-toggle="pill"
            data-te-target="#pills-disabled5"
            role="tab"
            aria-controls="pills-disabled5"
            aria-selected="false"
            >Disabled</a
          >
        </li>
      </ul>

      <!--Pills 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="pills-home5"
          role="tabpanel"
          aria-labelledby="pills-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="pills-profile5"
          role="tabpanel"
          aria-labelledby="pills-profile-tab5">
          Tab 2 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-contact5"
          role="tabpanel"
          aria-labelledby="pills-contact-tab5">
          Tab 3 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-disabled5"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab5">
          Tab 4 disabled
        </div>
      </div>

      <!--Pills navigation for neutral-50 color-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap pl-0 md:flex-row"
        role="tablist"
        data-te-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home6"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-neutral-50 data-[te-nav-active]:text-neutral-600 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-neutral-600 md:mr-4"
            id="pills-home-tab6"
            data-te-toggle="pill"
            data-te-target="#pills-home6"
            data-te-nav-active
            role="tab"
            aria-controls="pills-home6"
            aria-selected="true"
            >Home</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-profile6"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-neutral-50 data-[te-nav-active]:text-neutral-600 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-neutral-600 md:mr-4"
            id="pills-profile-tab6"
            data-te-toggle="pill"
            data-te-target="#pills-profile6"
            role="tab"
            aria-controls="pills-profile6"
            aria-selected="false"
            >Profile</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-contact6"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-neutral-50 data-[te-nav-active]:text-neutral-600 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-neutral-600 md:mr-4"
            id="pills-contact-tab6"
            data-te-toggle="pill"
            data-te-target="#pills-contact6"
            role="tab"
            aria-controls="pills-contact6"
            aria-selected="false"
            >Contact</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-disabled6"
            class="pointer-events-none my-2 block rounded bg-neutral-200 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:bg-neutral-600 dark:text-neutral-500"
            id="pills-disabled-tab6"
            data-te-toggle="pill"
            data-te-target="#pills-disabled6"
            role="tab"
            aria-controls="pills-disabled6"
            aria-selected="false"
            >Disabled</a
          >
        </li>
      </ul>

      <!--Pills 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="pills-home6"
          role="tabpanel"
          aria-labelledby="pills-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="pills-profile6"
          role="tabpanel"
          aria-labelledby="pills-profile-tab6">
          Tab 2 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-contact6"
          role="tabpanel"
          aria-labelledby="pills-contact-tab6">
          Tab 3 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-disabled6"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab6">
          Tab 4 disabled
        </div>
      </div>

      <!--Pills navigation for neutral-800 color-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap pl-0 md:flex-row"
        role="tablist"
        data-te-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home7"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-neutral-800 data-[te-nav-active]:text-neutral-50 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:!bg-neutral-900 dark:data-[te-nav-active]:text-neutral-50 md:mr-4"
            id="pills-home-tab7"
            data-te-toggle="pill"
            data-te-target="#pills-home7"
            data-te-nav-active
            role="tab"
            aria-controls="pills-home7"
            aria-selected="true"
            >Home</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-profile7"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-neutral-800 data-[te-nav-active]:text-neutral-50 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:!bg-neutral-900 dark:data-[te-nav-active]:text-neutral-50 md:mr-4"
            id="pills-profile-tab7"
            data-te-toggle="pill"
            data-te-target="#pills-profile7"
            role="tab"
            aria-controls="pills-profile7"
            aria-selected="false"
            >Profile</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-contact7"
            class="my-2 block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-neutral-800 data-[te-nav-active]:text-neutral-50 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:!bg-neutral-900 dark:data-[te-nav-active]:text-neutral-50 md:mr-4"
            id="pills-contact-tab7"
            data-te-toggle="pill"
            data-te-target="#pills-contact7"
            role="tab"
            aria-controls="pills-contact7"
            aria-selected="false"
            >Contact</a
          >
        </li>
        <li role="presentation">
          <a
            href="#pills-disabled7"
            class="pointer-events-none my-2 block rounded bg-neutral-200 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:bg-neutral-600 dark:text-neutral-500"
            id="pills-disabled-tab7"
            data-te-toggle="pill"
            data-te-target="#pills-disabled7"
            role="tab"
            aria-controls="pills-disabled7"
            aria-selected="false"
            >Disabled</a
          >
        </li>
      </ul>

      <!--Pills 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="pills-home7"
          role="tabpanel"
          aria-labelledby="pills-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="pills-profile7"
          role="tabpanel"
          aria-labelledby="pills-profile-tab7">
          Tab 2 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-contact7"
          role="tabpanel"
          aria-labelledby="pills-contact-tab7">
          Tab 3 content
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
          id="pills-disabled7"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab7">
          Tab 4 disabled
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Tab,
        initTE,
      } from "tw-elements";
      
      initTE({ 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.

Pills

Basic example

Fill

Justify

Vertical

Pills with buttons

Color options

Pills - API

Import

Usage

Regarding accessibility

Via data attributes

Via JavaScript

Methods

Events

Pills

Tailwind CSS Pills

Basic example

Fill

Justify

Vertical

Pills with buttons

Color options

Related resources

Tutorials:

Extended Docs:

Design System (Figma):

Pills - API

Import

Usage

Regarding accessibility

Via data attributes

Via JavaScript

Methods

Events