Tabs · Panel

Basic Tabs

A basic Tailwind Tabs example to navigate between different content areas.

Tab 1 content.

<div class="space-y-3">
  <div class="mv-tabs mv-tabs-line" data-mv-tabs="true">
    <button class="mv-tab-toggle active" data-mv-tab-toggle="#basic-tab-1">
      Tab 1</button><button class="mv-tab-toggle" data-mv-tab-toggle="#basic-tab-2">Tab 2</button><button class="mv-tab-toggle" data-mv-tab-toggle="#basic-tab-3">Tab 3</button>
  </div>
  <div class="text-sm">
    <div class="" id="basic-tab-1">
      Tab
      <!-- -->1<!-- -->
      content.
    </div>
    <div class="hidden" id="basic-tab-2">
      Tab
      <!-- -->2<!-- -->
      content.
    </div>
    <div class="hidden" id="basic-tab-3">
      Tab
      <!-- -->3<!-- -->
      content.
    </div>
  </div>
</div>

Icons

Enhance your Tailwind Tabs by integrating icons for a more intuitive and visually engaging navigation experience.

Tab 1 content.

<div class="space-y-3">
  <div class="mv-tabs mv-tabs-line" data-mv-tabs="true">
    <button class="mv-tab-toggle active" data-mv-tab-toggle="#icons-tab-1">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check" aria-hidden="true">
        <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path>
        <path d="m9 12 2 2 4-4"></path></svg>Tab 1</button><button class="mv-tab-toggle" data-mv-tab-toggle="#icons-tab-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-user" aria-hidden="true">
        <rect width="18" height="18" x="3" y="3" rx="2"></rect>
        <circle cx="12" cy="10" r="3"></circle>
        <path d="M7 21v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2"></path></svg>Tab 2</button><button class="mv-tab-toggle" data-mv-tab-toggle="#icons-tab-3">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar" aria-hidden="true">
        <path d="M8 2v4"></path>
        <path d="M16 2v4"></path>
        <rect width="18" height="18" x="3" y="4" rx="2"></rect>
        <path d="M3 10h18"></path></svg>Tab 3
    </button>
  </div>
  <div class="text-sm">
    <div class="" id="icons-tab-1">
      Tab
      <!-- -->1<!-- -->
      content.
    </div>
    <div class="hidden" id="icons-tab-2">
      Tab
      <!-- -->2<!-- -->
      content.
    </div>
    <div class="hidden" id="icons-tab-3">
      Tab
      <!-- -->3<!-- -->
      content.
    </div>
  </div>
</div>

Transition

Enable smooth transition effects using Tailwind Transition classes to enhance the user experience of Tailwind Tabs.

Tab 1 content.

<div class="flex flex-col gap-3 text-sm">
  <div class="flex items-center gap-7 border-b border-neutral-200 dark:border-neutral-700" data-mv-tabs="true">
    <button class="py-2 border-b-2 border-b-transparent text-neutral-700 dark:text-neutral-200 hover:text-blue-600 mv-tab-active:text-blue-600 mv-tab-active:border-b-blue-600 active" data-mv-tab-toggle="#trans-tab-1">
      Tab 1</button><button class="py-2 border-b-2 border-b-transparent text-neutral-700 dark:text-neutral-200 hover:text-blue-600 mv-tab-active:text-blue-600 mv-tab-active:border-b-blue-600" data-mv-tab-toggle="#trans-tab-2">
      Tab 2</button><button class="py-2 border-b-2 border-b-transparent text-neutral-700 dark:text-neutral-200 hover:text-blue-600 mv-tab-active:text-blue-600 mv-tab-active:border-b-blue-600" data-mv-tab-toggle="#trans-tab-3">
      Tab 3
    </button>
  </div>
  <div class="text-sm">
    <div class="transition-opacity duration-700 text-neutral-700 dark:text-neutral-200" id="trans-tab-1">
      Tab
      <!-- -->1<!-- -->
      content.
    </div>
    <div class="hidden transition-opacity duration-700 text-neutral-700 dark:text-neutral-200" id="trans-tab-2">
      Tab
      <!-- -->2<!-- -->
      content.
    </div>
    <div class="hidden transition-opacity duration-700 text-neutral-700 dark:text-neutral-200" id="trans-tab-3">
      Tab
      <!-- -->3<!-- -->
      content.
    </div>
  </div>
</div>

Button

Integrate Tailwind Tabs with the Tailwind Button component to enable a more focused and cohesive navigation style.

Tab 1 content.

<div class="space-y-3 text-sm">
  <div class="flex items-center gap-2.5" data-mv-tabs="true">
    <button class="mv-btn mv-btn-outline active" data-mv-tab-toggle="#btn-tab-1">
      Tab 1</button><button class="mv-btn mv-btn-outline" data-mv-tab-toggle="#btn-tab-2">
      Tab 2</button><button class="mv-btn mv-btn-outline" data-mv-tab-toggle="#btn-tab-3">
      Tab 3
    </button>
  </div>
  <div class="text-sm">
    <div class="" id="btn-tab-1">
      Tab
      <!-- -->1<!-- -->
      content.
    </div>
    <div class="hidden" id="btn-tab-2">
      Tab
      <!-- -->2<!-- -->
      content.
    </div>
    <div class="hidden" id="btn-tab-3">
      Tab
      <!-- -->3<!-- -->
      content.
    </div>
  </div>
</div>

Dropdown Menu

Integrate Tailwind Tabs with the Tailwind Dropdown component to enable advanced navigation support.

Tab 1 content.

<div class="space-y-3">
  <div class="mv-tabs mv-tabs-line" data-mv-tabs="true">
    <button class="mv-tab-toggle active" data-mv-tab-toggle="#drop-tab-1">
      Tab 1</button><button class="mv-tab-toggle" data-mv-tab-toggle="#drop-tab-2">Tab 2</button><button class="mv-tab-toggle" data-mv-tab-toggle="#drop-tab-3">Tab 3</button>
    <div class="inline-flex" data-mv-dropdown="true" data-mv-dropdown-trigger="click">
      <button class="mv-tab-toggle gap-1 flex items-center active" data-mv-dropdown-toggle="true">
        Dropdown Menu<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true">
          <path d="m6 9 6 6 6-6"></path>
        </svg>
      </button>
      <div class="mv-dropdown-menu w-40" data-mv-dropdown-menu="true">
        <div class="">
          <button class="mv-dropdown-menu-link" data-mv-dropdown-dismiss="true" data-mv-tab-toggle="#drop-tab-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check" aria-hidden="true">
              <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path>
              <path d="m9 12 2 2 4-4"></path></svg>Tab 4
          </button>
        </div>
        <div class="">
          <button class="mv-dropdown-menu-link" data-mv-dropdown-dismiss="true" data-mv-tab-toggle="#drop-tab-5">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-user" aria-hidden="true">
              <rect width="18" height="18" x="3" y="3" rx="2"></rect>
              <circle cx="12" cy="10" r="3"></circle>
              <path d="M7 21v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2"></path></svg>Tab 5
          </button>
        </div>
        <div class="">
          <button class="mv-dropdown-menu-link" data-mv-dropdown-dismiss="true" data-mv-tab-toggle="#drop-tab-6">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar" aria-hidden="true">
              <path d="M8 2v4"></path>
              <path d="M16 2v4"></path>
              <rect width="18" height="18" x="3" y="4" rx="2"></rect>
              <path d="M3 10h18"></path></svg>Tab 6
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="text-sm">
    <div class="" id="drop-tab-1">
      Tab
      <!-- -->1<!-- -->
      content.
    </div>
    <div class="hidden" id="drop-tab-2">
      Tab
      <!-- -->2<!-- -->
      content.
    </div>
    <div class="hidden" id="drop-tab-3">
      Tab
      <!-- -->3<!-- -->
      content.
    </div>
    <div class="hidden" id="drop-tab-4">
      Tab
      <!-- -->4<!-- -->
      content.
    </div>
    <div class="hidden" id="drop-tab-5">
      Tab
      <!-- -->5<!-- -->
      content.
    </div>
    <div class="hidden" id="drop-tab-6">
      Tab
      <!-- -->6<!-- -->
      content.
    </div>
  </div>
</div>