Tailwind CSS Tabs Collection

Explore various tab styles crafted with Tailwind CSS. These components provide flexible navigation for organizing content within your web applications.

Each example includes a live preview and readily available HTML code. Simply copy the code snippet and integrate it into your Tailwind project. Remember to adapt the content and potentially add JavaScript for full interactive functionality if needed.

Standard Horizontal Tabs

Content for Profile tab.

Content for Settings tab.

Content for Notifications tab.

<!-- Standard Horizontal Tabs -->
<div>
  <div class="border-b border-gray-200">
    <nav class="-mb-px flex space-x-6" aria-label="Tabs">
      <!-- Active Tab: Use border-blue-500 text-blue-600 -->
      <button aria-selected="true" class="whitespace-nowrap py-3 px-1 border-b-2 border-blue-500 text-sm font-medium text-blue-600 hover:text-blue-700 focus:outline-none">
        Profile
      </button>
      <!-- Inactive Tab: Use border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 -->
      <button aria-selected="false" class="whitespace-nowrap py-3 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
        Settings
      </button>
      <button aria-selected="false" class="whitespace-nowrap py-3 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
        Notifications
      </button>
    </nav>
  </div>

  <!-- Tab Content - Add your content panels here -->
  <div class="mt-4">
    <div class="p-4 bg-gray-50 rounded">Content for Profile tab.</div>
    <!-- Add other tab panels, typically shown/hidden with JS -->
    <!-- <div class="hidden p-4 bg-gray-50 rounded">Content for Settings tab.</div> -->
    <!-- <div class="hidden p-4 bg-gray-50 rounded">Content for Notifications tab.</div> -->
  </div>
</div>

Vertical Tabs

Content for My Account tab.

Content for Company tab.

Content for Billing tab.

<!-- Vertical Tabs -->
<div class="flex space-x-4">
  <!-- Tab Navigation -->
  <nav class="flex flex-col space-y-1 border-r border-gray-200 pr-4 w-48" aria-label="Vertical Tabs"> <!-- Adjust width (w-48) as needed -->
    <!-- Active Tab: Use border-blue-500 text-blue-600 bg-blue-50 -->
    <button aria-selected="true" class="text-left w-full whitespace-nowrap py-2 px-3 border-l-2 border-blue-500 text-sm font-medium text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 focus:outline-none">
      My Account
    </button>
    <!-- Inactive Tab: Use border-transparent text-gray-500 hover:bg-gray-50 hover:text-gray-700 -->
    <button aria-selected="false" class="text-left w-full whitespace-nowrap py-2 px-3 border-l-2 border-transparent text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700 focus:outline-none">
      Company
    </button>
    <button aria-selected="false" class="text-left w-full whitespace-nowrap py-2 px-3 border-l-2 border-transparent text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700 focus:outline-none">
      Billing
    </button>
  </nav>

  <!-- Tab Content Area -->
  <div class="flex-grow">
    <div class="p-4 bg-gray-50 rounded">Content for My Account tab.</div>
    <!-- Add other tab panels, typically shown/hidden with JS -->
    <!-- <div class="hidden p-4 bg-gray-50 rounded">Content for Company tab.</div> -->
    <!-- <div class="hidden p-4 bg-gray-50 rounded">Content for Billing tab.</div> -->
  </div>
</div>

Icon + Text Tabs

Content for Account tab.

Content for Company tab.

Content for Projects tab.

<!-- Icon + Text Tabs (using underline style for active state) -->
<div>
  <div class="border-b border-gray-200">
    <nav class="-mb-px flex space-x-6" aria-label="Tabs">
      <!-- Active Tab: Use border-blue-500 text-blue-600 -->
      <button aria-selected="true" class="inline-flex items-center space-x-2 whitespace-nowrap py-3 px-1 border-b-2 border-blue-500 text-sm font-medium text-blue-600 hover:text-blue-700 focus:outline-none">
        <!-- Heroicon: user-circle -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg>
        <span>Account</span>
      </button>
      <!-- Inactive Tab: Use border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 -->
      <button aria-selected="false" class="inline-flex items-center space-x-2 whitespace-nowrap py-3 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
         <!-- Heroicon: office-building -->
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H5a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2 0h2v2h-2V9zm2-4h-2v2h2V5z" clip-rule="evenodd" /></svg>
        <span>Company</span>
      </button>
      <button aria-selected="false" class="inline-flex items-center space-x-2 whitespace-nowrap py-3 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
        <!-- Heroicon: collection -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" /></svg>
        <span>Projects</span>
      </button>
    </nav>
  </div>
  <!-- Tab Content -->
  <div class="mt-4">
    <div class="p-4 bg-gray-50 rounded">Content for Account tab.</div>
  </div>
</div>

Icon-Only Tabs

Content for Account tab.

Content for Settings tab.

Content for Notifications tab.

<!-- Icon-Only Tabs (using underline style for active state) -->
<!-- Add title attributes for accessibility -->
<div>
  <div class="border-b border-gray-200">
    <nav class="-mb-px flex space-x-4" aria-label="Tabs">
      <!-- Active Tab: Use border-blue-500 text-blue-600 -->
      <button aria-selected="true" title="Account" class="inline-flex items-center justify-center p-3 border-b-2 border-blue-500 text-sm font-medium text-blue-600 hover:text-blue-700 focus:outline-none">
        <!-- Heroicon: user-circle -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg>
      </button>
      <!-- Inactive Tab: Use border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 -->
      <button aria-selected="false" title="Settings" class="inline-flex items-center justify-center p-3 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
        <!-- Heroicon: cog -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" /></svg>
      </button>
      <button aria-selected="false" title="Notifications" class="inline-flex items-center justify-center p-3 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
        <!-- Heroicon: bell -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" /></svg>
      </button>
    </nav>
  </div>
  <!-- Tab Content -->
  <div class="mt-4">
    <div class="p-4 bg-gray-50 rounded">Content for Account tab.</div>
  </div>
</div>

Underline Tabs

Content for Overview tab.

Content for Features tab.

Content for Details tab.

<!-- Underline Tabs -->
<div>
  <div class="border-b border-gray-200">
    <nav class="-mb-px flex space-x-8" aria-label="Tabs"> <!-- Adjust spacing (space-x-8) as needed -->
      <!-- Active Tab: Use border-blue-500 text-blue-600 -->
      <button aria-selected="true" class="whitespace-nowrap py-4 px-1 border-b-2 border-blue-500 text-sm font-medium text-blue-600 hover:text-blue-700 focus:outline-none">
        Overview
      </button>
      <!-- Inactive Tab: Use border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 -->
      <button aria-selected="false" class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
        Features
      </button>
      <button aria-selected="false" class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
        Details
      </button>
    </nav>
  </div>
  <!-- Tab Content -->
  <div class="mt-4">
    <div class="p-4 bg-gray-50 rounded">Content for Overview tab.</div>
  </div>
</div>

Pill-Style Tabs

Content for Active Pill tab.

Content for Inactive Pill tab.

Content for Another Pill tab.

<!-- Pill-Style Tabs -->
<div>
  <nav class="flex space-x-2" aria-label="Tabs"> <!-- Adjust spacing (space-x-2) as needed -->
    <!-- Active Tab: Use bg-blue-500 text-white -->
    <button aria-selected="true" class="px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
      Active Pill
    </button>
    <!-- Inactive Tab: Use bg-gray-100 text-gray-500 hover:bg-gray-200 -->
    <button aria-selected="false" class="px-4 py-2 text-sm font-medium text-gray-500 bg-gray-100 hover:bg-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
      Inactive Pill
    </button>
    <button aria-selected="false" class="px-4 py-2 text-sm font-medium text-gray-500 bg-gray-100 hover:bg-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
      Another Pill
    </button>
    <!-- Use rounded-full for fully rounded pills -->
    <!-- <button aria-selected="false" class="px-4 py-2 text-sm font-medium text-gray-500 bg-gray-100 hover:bg-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
          Round Pill
        </button> -->
  </nav>
   <!-- Tab Content -->
  <div class="mt-4">
    <div class="p-4 bg-gray-50 rounded">Content for Active Pill tab.</div>
  </div>
</div>

Boxed Tabs

Content for Tab 1.

Content for Tab 2.

Content for Tab 3.

<!-- Boxed Tabs -->
<div>
  <nav class="-mb-px flex space-x-1" aria-label="Tabs"> <!-- Negative margin pulls tabs onto the border -->
    <!-- Active Tab: border (except bottom), bg-white, text-blue-600 -->
    <button aria-selected="true" class="-mb-px border border-gray-200 border-b-white rounded-t-md px-4 py-2 text-sm font-medium bg-white text-blue-600 focus:outline-none">
      Tab 1
    </button>
    <!-- Inactive Tab: border-transparent, text-gray-500, hover states -->
    <button aria-selected="false" class="border-transparent rounded-t-md px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50 focus:outline-none">
      Tab 2
    </button>
    <button aria-selected="false" class="border-transparent rounded-t-md px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50 focus:outline-none">
      Tab 3
    </button>
  </nav>
  <!-- Tab Content Area: Apply border and rounded corners matching tabs -->
  <div class="border border-gray-200 rounded-b-md rounded-tr-md"> <!-- rounded-tr-md handles the top-right corner where no active tab is -->
    <div class="p-4">Content for Tab 1.</div>
    <!-- Add other tab panels, typically shown/hidden with JS -->
    <!-- <div class="hidden p-4">Content for Tab 2.</div> -->
    <!-- <div class="hidden p-4">Content for Tab 3.</div> -->
  </div>
</div>

Scrollable Tabs (Horizontal Overflow)

Content for Tab Item 1.

Content for Tab Item 2.

Note: Requires the tailwind-scrollbar plugin (or similar) for styled scrollbars (scrollbar-thin etc.). Basic overflow works without it.

<!-- Scrollable Tabs (Horizontal Overflow) -->
<!-- Note: Requires tailwind-scrollbar plugin for styled scrollbars (optional) -->
<!-- Add `npm install -D tailwind-scrollbar` and configure in tailwind.config.js -->
<div>
  <div class="border-b border-gray-200 overflow-x-auto whitespace-nowrap scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
    <nav class="-mb-px flex space-x-6 px-1" aria-label="Tabs"> <!-- px-1 prevents first/last item cutting off -->
      <!-- Active Tab: Use border-blue-500 text-blue-600 -->
      <button aria-selected="true" class="flex-shrink-0 whitespace-nowrap py-3 px-1 border-b-2 border-blue-500 text-sm font-medium text-blue-600 hover:text-blue-700 focus:outline-none">
        Tab Item 1
      </button>
      <!-- Inactive Tab: Use border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 -->
      <button aria-selected="false" class="flex-shrink-0 whitespace-nowrap py-3 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
        Tab Item 2 Longer Name
      </button>
      <button aria-selected="false" class="flex-shrink-0 whitespace-nowrap py-3 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
        Item 3
      </button>
      <button aria-selected="false" class="flex-shrink-0 whitespace-nowrap py-3 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
        Tab 4
      </button>
      <button aria-selected="false" class="flex-shrink-0 whitespace-nowrap py-3 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
        Another Tab Item 5
      </button>
      <!-- Add more tabs as needed -->
       <button aria-selected="false" class="flex-shrink-0 whitespace-nowrap py-3 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
        Short 6
      </button>
       <button aria-selected="false" class="flex-shrink-0 whitespace-nowrap py-3 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
        Tab 7
      </button>
       <button aria-selected="false" class="flex-shrink-0 whitespace-nowrap py-3 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none">
        The Last Tab Item 8
      </button>
    </nav>
  </div>
  <!-- Tab Content -->
  <div class="mt-4">
    <div class="p-4 bg-gray-50 rounded">Content for Tab Item 1.</div>
  </div>
</div>

FAQ on Tailwind CSS Tabs

How do I create basic tabs using Tailwind CSS?

To create a tab navigation component, start with HTML markup using either <nav> with anchors or a <ul> with list items. Apply Tailwind utility classes like flex flex-wrap for horizontal layout. Add JavaScript for tab content switching functionality. Most UI component libraries like Flowbite and Material Tailwind offer ready-to-use implementations with proper ARIA tab roles for accessibility.

What's the proper way to handle tab accessibility?

Accessibility requires proper ARIA attributes when building tab panels. Use role="tablist" on the container, role="tab" for selectors, and role="tabpanel" for content sections. Include aria-selected, aria-controls, and aria-labelledby attributes to support screen readers. WAI-ARIA guidelines recommend using <button> elements for tabs since they trigger dynamic content changes rather than navigation.

Can I create vertical tabs with Tailwind?

Yes! While the standard tab layout is horizontal, creating vertical tabs arrangement is simple. Use Tailwind's flex direction utilities by changing flex-row to flex-col on your container. This creates a sidebar-style secondary navigation that works well in dashboards. Libraries like TW Elements and DaisyUI offer vertical tab variants with responsive behavior for different screen sizes.

How do I style the active tab state?

Style the active state using conditional classes. Apply distinctive styling for the active tab with classes like border-b-2 border-blue-500 for an underline effect or bg-blue-500 text-white for filled styling. Modern tab JavaScript plugins use data attributes to toggle classes. Active indicators are crucial for showing users their current location in the interface.

How do I toggle tab content visibility?

Control content visibility with JavaScript. Add click event listeners to tabs that hide all content sections and show only the targeted panel. Many frameworks like Alpine.js simplify this with declarative syntax. Libraries such as Preline UI provide complete solutions with smooth transition effects between tabs, handling all the DOM manipulation for you.

Do I need JavaScript for Tailwind tabs?

Yes, functional tabs require JavaScript for tab toggle behavior and event handling. While you can create the visual appearance with just Tailwind CSS, the interactive functionality needs JS. Options include writing custom JavaScript, using a library like Flowbite or Pagedone, or frameworks like React components that handle the logic internally through state management.

How can I add icons to my tabs?

Enhance user experience by incorporating SVG icons alongside text in tabs. Most component libraries support this pattern. Place SVG elements before text in your tab markup and style with Tailwind's spacing utilities. This creates a more intuitive UI design pattern and improves visual hierarchy. Many libraries offer premade components with icon support.

How do I make tabs responsive?

Build responsive tab interfaces by using Tailwind's breakpoint prefixes. For smaller screens, consider switching from horizontal to vertical layout, or implement a scrollable tab bar. Use overflow-x-auto for horizontal scrolling tabs. Some implementations use dropdown menus on mobile. Test thoroughly across devices to ensure proper content organization at all screen sizes.

What are pill-style tabs and how do I create them?

Pill-style tabs feature rounded corners and often use filled backgrounds instead of underlines. Create them by adding rounded-full or rounded-lg classes to your tabs. Add padding and adjust spacing for comfort. This style works well for content toggling in forms and settings pages. Libraries like Material Tailwind offer pre-built pill tab variants.

How do tabs differ from other navigation components?

Tabs serve as secondary navigation within a primary context, unlike main navigation bars. They organize related content in a single view without page reload, improving user interaction. Tabs typically control content directly below them, while navbars navigate between pages. Choose tabs when content belongs to the same context but needs categorical organization for better frontend development experiences.