navtabsbeginner

Tab Navigation

Horizontal tab navigation with an active underline indicator and smooth transitions.

Preview

<div class="border-b border-gray-200">
  <nav class="flex gap-8 px-4">
    <a href="#" class="py-3 border-b-2 border-indigo-600 text-indigo-600 font-medium text-sm">Overview</a>
    <a href="#" class="py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium text-sm transition-colors">Features</a>
    <a href="#" class="py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium text-sm transition-colors">Reviews</a>
    <a href="#" class="py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium text-sm transition-colors">FAQ</a>
  </nav>
</div>

Color Breakdown

Container Border

border-gray-200

#e5e7eb

Active Tab Text

text-indigo-600

#4f46e5

Active Border

border-indigo-600

#4f46e5

Inactive Text

text-gray-500

#6b7280

Hover Border

hover:border-gray-300

#d1d5db

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:border-gray-700 dark:text-indigo-400 dark:border-indigo-400 dark:text-gray-400

Use Cases

Settings pagesProduct detail viewsProfile sections

Browser Support

All modern browsers.

Related Recipes

Dark Footer

section - beginner

Transparent Navbar

nav - intermediate

Dark Navbar

nav - beginner

Sidebar Navigation

nav - intermediate

Styled Breadcrumb

nav - beginner

Bottom Navigation

nav - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I animate the underline sliding between tabs?▼

Use a separate div for the underline, absolutely positioned below the tabs. Use JavaScript to calculate the left offset and width, then animate with transition-all.