Tab Navigation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<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>

1
2
3
4
5
6
7
8
9
10
11
12

# Tab Navigation

Tab-style navigation.

## Usage
```bash
npx devsnips add Tailwind/Components/Navigation/tab-navigation
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`