devsnips
Search docs, APIs, guides…

Component

Tab Navigation

Horizontal tab navigation with bottom border indicator. Perfect for page sections and content organization.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Bottom border indicator
  • Icon support
  • Active state styling
  • Hover transitions
  • Pills variant

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/navigation/tab-navigation/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Navigation/tab-navigation
registry path: Tailwind/Components/Navigation/tab-navigation

Source

Implementation

code.html 
<div class="border-b border-gray-200">
  <nav class="flex -mb-px overflow-x-auto" aria-label="Tabs">
    <a href="#" class="group inline-flex items-center gap-2 px-4 sm:px-6 py-4 border-b-2 shrink-0 whitespace-nowrap border-indigo-500 text-indigo-600 font-medium">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
      </svg>
      Overview
    </a>
    <a href="#" class="group inline-flex items-center gap-2 px-4 sm:px-6 py-4 border-b-2 shrink-0 whitespace-nowrap border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium transition-colors">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
      </svg>
      Analytics
    </a>
    <a href="#" class="group inline-flex items-center gap-2 px-4 sm:px-6 py-4 border-b-2 shrink-0 whitespace-nowrap border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium transition-colors">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
      </svg>
      Reports
    </a>
    <a href="#" class="group inline-flex items-center gap-2 px-4 sm:px-6 py-4 border-b-2 shrink-0 whitespace-nowrap border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium transition-colors">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
      </svg>
      Documentation
    </a>
  </nav>
</div>
28 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/navigation/tab-navigation
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/navigation/tab-navigation/

Install: npx devsnips add
Tailwind/Components/Navigation/tab-navigation

This is the Tab Navigation — Horizontal tab navigation with bottom border indicator. Perfect for page sections and content organization.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/navigation/tab-navigation