Scrollable Tabs

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

<div class="w-full max-w-3xl">
  <div class="relative">
    <!-- fade edges -->
    <div class="pointer-events-none absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-gray-50 to-transparent z-10" aria-hidden="true"></div>
    <div class="pointer-events-none absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-gray-50 to-transparent z-10" aria-hidden="true"></div>

    <div role="tablist" aria-label="Browse categories" class="flex items-center gap-2 overflow-x-auto pb-2 px-1 scroll-smooth [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
      <button role="tab" id="ctab-all" aria-selected="true" aria-controls="cpanel-all" tabindex="0"
        class="shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
        All
      </button>
      <button role="tab" id="ctab-electronics" aria-selected="false" aria-controls="cpanel-electronics" tabindex="-1"
        class="shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
        Electronics
      </button>
      <button role="tab" id="ctab-fashion" aria-selected="false" aria-controls="cpanel-fashion" tabindex="-1"
        class="shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
        Fashion
      </button>
      <button role="tab" id="ctab-home" aria-selected="false" aria-controls="cpanel-home" tabindex="-1"
        class="shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
        <svg class="w-4 h-4" 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>
        Home & Living
      </button>
      <button role="tab" id="ctab-sports" aria-selected="false" aria-controls="cpanel-sports" tabindex="-1"
        class="shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
        Sports
      </button>
      <button role="tab" id="ctab-books" aria-selected="false" aria-controls="cpanel-books" tabindex="-1"
        class="shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
        <svg class="w-4 h-4" 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>
        Books
      </button>
      <button role="tab" id="ctab-toys" aria-selected="false" aria-controls="cpanel-toys" tabindex="-1"
        class="shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        Toys & Games
      </button>
      <button role="tab" id="ctab-grocery" aria-selected="false" aria-controls="cpanel-grocery" tabindex="-1"
        class="shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
        Grocery
      </button>
    </div>
  </div>

  <div class="mt-4">
    <div role="tabpanel" id="cpanel-all" aria-labelledby="ctab-all" tabindex="0" class="grid grid-cols-2 sm:grid-cols-3 gap-3 focus:outline-none">
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Featured items</p><p class="text-xs text-gray-500 mt-0.5">Hand-picked across every category</p></div>
      <div class="rounded-xl border border-gray-200 p-4 bg-gray-50"><p class="text-sm font-medium text-gray-900">Top deals</p><p class="text-xs text-gray-500 mt-0.5">Save up to 60% today</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">New arrivals</p><p class="text-xs text-gray-500 mt-0.5">Just landed this week</p></div>
    </div>
    <div role="tabpanel" id="cpanel-electronics" aria-labelledby="ctab-electronics" tabindex="0" class="hidden grid grid-cols-2 sm:grid-cols-3 gap-3 focus:outline-none">
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Headphones</p><p class="text-xs text-gray-500 mt-0.5">Wireless & noise-cancelling</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Laptops</p><p class="text-xs text-gray-500 mt-0.5">Ultrabooks & gaming</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Smartphones</p><p class="text-xs text-gray-500 mt-0.5">Flagship & budget</p></div>
    </div>
    <div role="tabpanel" id="cpanel-fashion" aria-labelledby="ctab-fashion" tabindex="0" class="hidden grid grid-cols-2 sm:grid-cols-3 gap-3 focus:outline-none">
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Men</p><p class="text-xs text-gray-500 mt-0.5">Tops, bottoms, shoes</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Women</p><p class="text-xs text-gray-500 mt-0.5">Dresses, knits, accessories</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Kids</p><p class="text-xs text-gray-500 mt-0.5">Trending now</p></div>
    </div>
    <div role="tabpanel" id="cpanel-home" aria-labelledby="ctab-home" tabindex="0" class="hidden grid grid-cols-2 sm:grid-cols-3 gap-3 focus:outline-none">
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Furniture</p><p class="text-xs text-gray-500 mt-0.5">Sofas, tables, storage</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Kitchen</p><p class="text-xs text-gray-500 mt-0.5">Cookware & dining</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Decor</p><p class="text-xs text-gray-500 mt-0.5">Lighting & accents</p></div>
    </div>
    <div role="tabpanel" id="cpanel-sports" aria-labelledby="ctab-sports" tabindex="0" class="hidden grid grid-cols-2 sm:grid-cols-3 gap-3 focus:outline-none">
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Fitness</p><p class="text-xs text-gray-500 mt-0.5">Gear & apparel</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Outdoor</p><p class="text-xs text-gray-500 mt-0.5">Camping & hiking</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Cycling</p><p class="text-xs text-gray-500 mt-0.5">Bikes & accessories</p></div>
    </div>
    <div role="tabpanel" id="cpanel-books" aria-labelledby="ctab-books" tabindex="0" class="hidden grid grid-cols-2 sm:grid-cols-3 gap-3 focus:outline-none">
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Fiction</p><p class="text-xs text-gray-500 mt-0.5">Bestsellers & classics</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Non-fiction</p><p class="text-xs text-gray-500 mt-0.5">Biography & science</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Children</p><p class="text-xs text-gray-500 mt-0.5">Picture & chapter books</p></div>
    </div>
    <div role="tabpanel" id="cpanel-toys" aria-labelledby="ctab-toys" tabindex="0" class="hidden grid grid-cols-2 sm:grid-cols-3 gap-3 focus:outline-none">
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Board games</p><p class="text-xs text-gray-500 mt-0.5">Family & strategy</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Action figures</p><p class="text-xs text-gray-500 mt-0.5">Collectibles</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Building sets</p><p class="text-xs text-gray-500 mt-0.5">Ages 4+</p></div>
    </div>
    <div role="tabpanel" id="cpanel-grocery" aria-labelledby="ctab-grocery" tabindex="0" class="hidden grid grid-cols-2 sm:grid-cols-3 gap-3 focus:outline-none">
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Fresh produce</p><p class="text-xs text-gray-500 mt-0.5">Farm to door</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Pantry</p><p class="text-xs text-gray-500 mt-0.5">Staples & snacks</p></div>
      <div class="rounded-xl border border-gray-200 p-4"><p class="text-sm font-medium text-gray-900">Beverages</p><p class="text-xs text-gray-500 mt-0.5">Coffee, tea, juice</p></div>
    </div>
  </div>
</div>

<script>
  (function () {
    var list = document.querySelector('[aria-label="Browse categories"]');
    if (!list) return;
    var tabs = Array.prototype.slice.call(list.querySelectorAll('[role="tab"]'));
    var panels = tabs.map(function (t) { return document.getElementById(t.getAttribute('aria-controls')); });
    function activate(tab) {
      tabs.forEach(function (t) {
        var s = t === tab;
        t.setAttribute('aria-selected', s); t.tabIndex = s ? 0 : -1;
        t.classList.toggle('text-white', s); t.classList.toggle('bg-gray-900', s);
        t.classList.toggle('text-gray-700', !s); t.classList.toggle('bg-white', !s); t.classList.toggle('border', !s); t.classList.toggle('border-gray-200', !s); t.classList.toggle('hover:bg-gray-50', !s);
      });
      panels.forEach(function (p) { if (p) p.classList.add('hidden'); });
      var panel = document.getElementById(tab.getAttribute('aria-controls'));
      if (panel) { panel.classList.remove('hidden'); }
      tab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
    }
    tabs.forEach(function (tab, i) {
      tab.addEventListener('click', function () { activate(tab); });
      tab.addEventListener('keydown', function (e) {
        var idx = null;
        if (e.key === 'ArrowRight') idx = (i + 1) % tabs.length;
        if (e.key === 'ArrowLeft') idx = (i - 1 + tabs.length) % tabs.length;
        if (e.key === 'Home') idx = 0;
        if (e.key === 'End') idx = tabs.length - 1;
        if (idx !== null) { e.preventDefault(); tabs[idx].focus(); activate(tabs[idx]); }
      });
    });
  })();
</script>

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

# Scrollable Tabs

Horizontally scrollable tab list.

## Usage
```bash
npx devsnips add Tailwind/Components/Tabs/scrollable-tabs
```
Copy from `code.html`.

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