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 ps-0 md:flex-row"
        id="pills-tab"
        role="tablist"
        data-twe-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home"
            class="my-2 block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-home-tab"
            data-twe-toggle="pill"
            data-twe-target="#pills-home"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-profile-tab"
            data-twe-toggle="pill"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-contact-tab"
            data-twe-toggle="pill"
            data-twe-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-zinc-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="pills-home"
          role="tabpanel"
          aria-labelledby="pills-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="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-[twe-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-[twe-tab-active]:block"
          id="pills-disabled"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab">
          Tab 4 disabled
        </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 pills to fit the container.

HTML
Javascript

        
            
      <!--Pills navigation-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap ps-0 md:flex-row"
        role="tablist"
        data-twe-nav-ref>
        <li role="presentation" class="flex-auto text-center">
          <a
            href="#pills-home01"
            class="my-2 block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-home-tab01"
            data-twe-toggle="pill"
            data-twe-target="#pills-home01"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-profile-tab01"
            data-twe-toggle="pill"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-contact-tab01"
            data-twe-toggle="pill"
            data-twe-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-zinc-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="pills-home01"
          role="tabpanel"
          aria-labelledby="pills-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="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-[twe-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-[twe-tab-active]:block"
          id="pills-disabled01"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab01">
          Tab 4 disabled
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Tab,
        initTWE,
      } from "tw-elements";
      
      initTWE({ 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 ps-0 md:flex-row"
        role="tablist"
        data-twe-nav-ref>
        <li role="presentation" class="flex-grow basis-0 text-center">
          <a
            href="#pills-home02"
            class="my-2 block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-home-tab02"
            data-twe-toggle="pill"
            data-twe-target="#pills-home02"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-profile-tab02"
            data-twe-toggle="pill"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-contact-tab02"
            data-twe-toggle="pill"
            data-twe-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-zinc-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="pills-home02"
          role="tabpanel"
          aria-labelledby="pills-home-tab02"
          data-twe-tab-active>
          Tab 1 content justified
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-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-[twe-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-[twe-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,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Tab });

Vertical

Make vertical pills instead of default horizontal ones.

HTML
javascript

        
            
      <!--Pills navigation-->
      <div class="flex items-start">
        <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="#pills-home03"
              class="my-2 block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500"
              id="pills-home-tab03"
              data-twe-toggle="pill"
              data-twe-target="#pills-home03"
              data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500"
              id="pills-profile-tab03"
              data-twe-toggle="pill"
              data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500"
              id="pills-contact-tab03"
              data-twe-toggle="pill"
              data-twe-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-zinc-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-twe-toggle="pill"
              data-twe-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-[twe-tab-active]:block"
            id="pills-home03"
            role="tabpanel"
            aria-labelledby="pills-home-tab03"
            data-twe-tab-active>
            Tab 1 content vertical
          </div>
          <div
            class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-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-[twe-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-[twe-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,
        initTWE,
      } from "tw-elements";
      
      initTWE({ 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 ps-0 md:flex-row"
        role="tablist"
        data-twe-nav-ref>
        <li role="presentation">
          <button
            type="button"
            class="my-2 block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-home-tab04"
            data-twe-toggle="pill"
            data-twe-target="#pills-home04"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-profile-tab04"
            data-twe-toggle="pill"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-contact-tab04"
            data-twe-toggle="pill"
            data-twe-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-zinc-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-twe-toggle="pill"
            data-twe-target="#pills-disabled04"
            data-twe-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-[twe-tab-active]:block"
          id="pills-home04"
          role="tabpanel"
          aria-labelledby="pills-home-tab04"
          data-twe-tab-active>
          Tab 1 content button version
        </div>
        <div
          class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-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-[twe-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-[twe-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,
        initTWE,
      } from "tw-elements";
      
      initTWE({ 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 ps-0 md:flex-row"
        role="tablist"
        data-twe-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home0"
            class="my-2 block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-home-tab0"
            data-twe-toggle="pill"
            data-twe-target="#pills-home0"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-profile-tab0"
            data-twe-toggle="pill"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
            id="pills-contact-tab0"
            data-twe-toggle="pill"
            data-twe-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-zinc-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="pills-home0"
          role="tabpanel"
          aria-labelledby="pills-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="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-[twe-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-[twe-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 ps-0 md:flex-row"
        role="tablist"
        data-twe-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home1"
            class="my-2 block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-secondary-200 data-[twe-nav-active]:text-secondary-800 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-[#202124] dark:data-[twe-nav-active]:text-secondary-400 md:me-4"
            id="pills-home-tab1"
            data-twe-toggle="pill"
            data-twe-target="#pills-home1"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-secondary-200 data-[twe-nav-active]:text-secondary-800 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-[#202124] dark:data-[twe-nav-active]:text-secondary-400 md:me-4"
            id="pills-profile-tab1"
            data-twe-toggle="pill"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-secondary-200 data-[twe-nav-active]:text-secondary-800 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-[#202124] dark:data-[twe-nav-active]:text-secondary-400 md:me-4"
            id="pills-contact-tab1"
            data-twe-toggle="pill"
            data-twe-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-zinc-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="pills-home1"
          role="tabpanel"
          aria-labelledby="pills-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="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-[twe-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-[twe-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 ps-0 md:flex-row"
        role="tablist"
        data-twe-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home2"
            class="my-2 block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-success-100 data-[twe-nav-active]:text-success-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-green-950 dark:data-[twe-nav-active]:text-success-500/80 md:me-4"
            id="pills-home-tab2"
            data-twe-toggle="pill"
            data-twe-target="#pills-home2"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-success-100 data-[twe-nav-active]:text-success-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-green-950 dark:data-[twe-nav-active]:text-success-500/80 md:me-4"
            id="pills-profile-tab2"
            data-twe-toggle="pill"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-success-100 data-[twe-nav-active]:text-success-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-green-950 dark:data-[twe-nav-active]:text-success-500/80 md:me-4"
            id="pills-contact-tab2"
            data-twe-toggle="pill"
            data-twe-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-zinc-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="pills-home2"
          role="tabpanel"
          aria-labelledby="pills-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="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-[twe-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-[twe-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 ps-0 md:flex-row"
        role="tablist"
        data-twe-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home3"
            class="my-2 block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-danger-100 data-[twe-nav-active]:text-danger-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-[#2c0f14] dark:data-[twe-nav-active]:text-danger-500 md:me-4"
            id="pills-home-tab3"
            data-twe-toggle="pill"
            data-twe-target="#pills-home3"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-danger-100 data-[twe-nav-active]:text-danger-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-[#2c0f14] dark:data-[twe-nav-active]:text-danger-500 md:me-4"
            id="pills-profile-tab3"
            data-twe-toggle="pill"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-danger-100 data-[twe-nav-active]:text-danger-700 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-[#2c0f14] dark:data-[twe-nav-active]:text-danger-500 md:me-4"
            id="pills-contact-tab3"
            data-twe-toggle="pill"
            data-twe-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-zinc-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="pills-home3"
          role="tabpanel"
          aria-labelledby="pills-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="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-[twe-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-[twe-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 ps-0 md:flex-row"
        role="tablist"
        data-twe-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home4"
            class="my-2 block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-warning-100 data-[twe-nav-active]:text-warning-800 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-[#2e2005] dark:data-[twe-nav-active]:text-warning-500 md:me-4"
            id="pills-home-tab4"
            data-twe-toggle="pill"
            data-twe-target="#pills-home4"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-warning-100 data-[twe-nav-active]:text-warning-800 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-[#2e2005] dark:data-[twe-nav-active]:text-warning-500 md:me-4"
            id="pills-profile-tab4"
            data-twe-toggle="pill"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-warning-100 data-[twe-nav-active]:text-warning-800 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-[#2e2005] dark:data-[twe-nav-active]:text-warning-500 md:me-4"
            id="pills-contact-tab4"
            data-twe-toggle="pill"
            data-twe-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-zinc-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="pills-home4"
          role="tabpanel"
          aria-labelledby="pills-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="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-[twe-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-[twe-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 ps-0 md:flex-row"
        role="tablist"
        data-twe-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home5"
            class="my-2 block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-info-100 data-[twe-nav-active]:text-info-800 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-[#11242A] dark:data-[twe-nav-active]:text-info-500 md:me-4"
            id="pills-home-tab5"
            data-twe-toggle="pill"
            data-twe-target="#pills-home5"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-info-100 data-[twe-nav-active]:text-info-800 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-[#11242A] dark:data-[twe-nav-active]:text-info-500 md:me-4"
            id="pills-profile-tab5"
            data-twe-toggle="pill"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-info-100 data-[twe-nav-active]:text-info-800 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-[#11242A] dark:data-[twe-nav-active]:text-info-500 md:me-4"
            id="pills-contact-tab5"
            data-twe-toggle="pill"
            data-twe-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-zinc-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="pills-home5"
          role="tabpanel"
          aria-labelledby="pills-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="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-[twe-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-[twe-tab-active]:block"
          id="pills-disabled5"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab5">
          Tab 4 disabled
        </div>
      </div>

      <!--Pills navigation for light color-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap ps-0 md:flex-row"
        role="tablist"
        data-twe-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home6"
            class="my-2 block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-neutral-50 data-[twe-nav-active]:text-zinc-600 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-neutral-600 dark:data-[twe-nav-active]:text-neutral-100 md:me-4"
            id="pills-home-tab6"
            data-twe-toggle="pill"
            data-twe-target="#pills-home6"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-neutral-50 data-[twe-nav-active]:text-zinc-600 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-neutral-600 dark:data-[twe-nav-active]:text-neutral-100 md:me-4"
            id="pills-profile-tab6"
            data-twe-toggle="pill"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-neutral-50 data-[twe-nav-active]:text-zinc-600 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:!bg-neutral-600 dark:data-[twe-nav-active]:text-neutral-100 md:me-4"
            id="pills-contact-tab6"
            data-twe-toggle="pill"
            data-twe-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-zinc-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-twe-toggle="pill"
            data-twe-target="#pills-disabled6"
            role="tab"
            aria-controls="pills-disabled6"
            aria-selected="false"
            >Disabled</a
          >
        </li>
      </ul>

      <!--Pills content for light color-->
      <div class="mb-6">
        <div
          class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[twe-tab-active]:block"
          id="pills-home6"
          role="tabpanel"
          aria-labelledby="pills-home-tab6"
          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="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-[twe-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-[twe-tab-active]:block"
          id="pills-disabled6"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab6">
          Tab 4 disabled
        </div>
      </div>

      <!--Pills navigation for dark color-->
      <ul
        class="mb-5 flex list-none flex-col flex-wrap ps-0 md:flex-row"
        role="tablist"
        data-twe-nav-ref>
        <li role="presentation">
          <a
            href="#pills-home7"
            class="my-2 block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-neutral-800 data-[twe-nav-active]:text-zinc-100 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:text-zinc-100 md:me-4"
            id="pills-home-tab7"
            data-twe-toggle="pill"
            data-twe-target="#pills-home7"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-neutral-800 data-[twe-nav-active]:text-zinc-100 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:text-zinc-100 md:me-4"
            id="pills-profile-tab7"
            data-twe-toggle="pill"
            data-twe-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-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-neutral-800 data-[twe-nav-active]:text-zinc-100 dark:bg-neutral-700 dark:text-white/50 dark:data-[twe-nav-active]:text-zinc-100 md:me-4"
            id="pills-contact-tab7"
            data-twe-toggle="pill"
            data-twe-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-zinc-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-twe-toggle="pill"
            data-twe-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-[twe-tab-active]:block"
          id="pills-home7"
          role="tabpanel"
          aria-labelledby="pills-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="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-[twe-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-[twe-tab-active]:block"
          id="pills-disabled7"
          role="tabpanel"
          aria-labelledby="pills-disabled-tab7">
          Tab 4 disabled
        </div>
      </div>

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

Pills

Basic example

Fill

Justify

Vertical

Pills with buttons

Color options

Pills - API

Import

Usage

Regarding accessibility

Via data attributes

Via JavaScript

Methods

Events

Access restricted

To view this section you must have an active PRO account

Pills

Tailwind CSS Pills

Basic example

Fill

Justify

Vertical

Pills with buttons

Color options

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Pills - API

Import

Usage

Regarding accessibility

Via data attributes

Via JavaScript

Methods

Events