Icon 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

<div class="w-full max-w-2xl bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
  <div class="px-6 py-5 border-b border-gray-100">
    <h2 class="text-lg font-semibold text-gray-900">Account Settings</h2>
    <p class="text-sm text-gray-500">Configure your profile, security, billing, and notifications</p>
  </div>

  <div role="tablist" aria-label="Settings sections" class="grid grid-cols-2 sm:grid-cols-4 gap-1 p-3 bg-gray-50 border-b border-gray-100">
    <button role="tab" id="itab-profile" aria-selected="true" aria-controls="ipanel-profile" tabindex="0"
      class="flex flex-col items-center gap-2 px-3 py-3 rounded-xl text-gray-700 hover:bg-gray-100 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
      <span class="flex items-center justify-center w-10 h-10 rounded-lg bg-white border border-gray-200 group-[.is-active]:bg-blue-600">
        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
      </span>
      <span class="text-xs font-medium">Profile</span>
    </button>
    <button role="tab" id="itab-security" aria-selected="false" aria-controls="ipanel-security" tabindex="-1"
      class="flex flex-col items-center gap-2 px-3 py-3 rounded-xl text-gray-700 hover:bg-gray-100 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
      <span class="flex items-center justify-center w-10 h-10 rounded-lg bg-white border border-gray-200">
        <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
      </span>
      <span class="text-xs font-medium">Security</span>
    </button>
    <button role="tab" id="itab-billing" aria-selected="false" aria-controls="ipanel-billing" tabindex="-1"
      class="flex flex-col items-center gap-2 px-3 py-3 rounded-xl text-gray-700 hover:bg-gray-100 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
      <span class="flex items-center justify-center w-10 h-10 rounded-lg bg-white border border-gray-200">
        <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
      </span>
      <span class="text-xs font-medium">Billing</span>
    </button>
    <button role="tab" id="itab-notifications" aria-selected="false" aria-controls="ipanel-notifications" tabindex="-1"
      class="flex flex-col items-center gap-2 px-3 py-3 rounded-xl text-gray-700 hover:bg-gray-100 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
      <span class="flex items-center justify-center w-10 h-10 rounded-lg bg-white border border-gray-200">
        <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
      </span>
      <span class="text-xs font-medium">Notifications</span>
    </button>
  </div>

  <div role="tabpanel" id="ipanel-profile" aria-labelledby="itab-profile" tabindex="0" class="p-6 focus:outline-none">
    <label class="block text-sm font-medium text-gray-700 mb-1" for="iname">Full name</label>
    <input id="iname" type="text" value="Sarah Mitchell" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
    <label class="block text-sm font-medium text-gray-700 mb-1 mt-4" for="iemail">Email address</label>
    <input id="iemail" type="email" value="sarah@acme.io" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
  </div>
  <div role="tabpanel" id="ipanel-security" aria-labelledby="itab-security" tabindex="0" class="p-6 hidden focus:outline-none">
    <div class="flex items-center justify-between">
      <div><p class="text-sm font-medium text-gray-900">Two-factor authentication</p><p class="text-xs text-gray-500">Add an extra layer of security to your account.</p></div>
      <button role="switch" aria-checked="true" class="relative inline-flex h-6 w-11 items-center rounded-full bg-blue-600 transition-colors"><span class="inline-block h-4 w-4 transform rounded-full bg-white transition translate-x-6"></span></button>
    </div>
    <button class="mt-6 text-sm font-medium text-blue-600 hover:text-blue-700">Change password →</button>
  </div>
  <div role="tabpanel" id="ipanel-billing" aria-labelledby="itab-billing" tabindex="0" class="p-6 hidden focus:outline-none">
    <div class="flex items-center justify-between rounded-lg border border-gray-200 p-4">
      <div><p class="text-sm font-medium text-gray-900">Pro plan</p><p class="text-xs text-gray-500">$29/month · renews Aug 12</p></div>
      <span class="text-sm font-semibold text-blue-600">Active</span>
    </div>
    <button class="mt-6 text-sm font-medium text-blue-600 hover:text-blue-700">Manage subscription →</button>
  </div>
  <div role="tabpanel" id="ipanel-notifications" aria-labelledby="itab-notifications" tabindex="0" class="p-6 hidden focus:outline-none">
    <div class="space-y-3">
      <label class="flex items-center gap-3"><input type="checkbox" checked class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"><span class="text-sm text-gray-700">Product updates and announcements</span></label>
      <label class="flex items-center gap-3"><input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"><span class="text-sm text-gray-700">Weekly usage digest</span></label>
    </div>
  </div>
</div>

<script>
  (function () {
    var list = document.querySelector('[aria-label="Settings sections"]');
    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;
        var wrap = t.querySelector('span.flex'); var svg = wrap && wrap.querySelector('svg');
        var label = t.querySelector('span:last-child');
        if (s) { t.classList.add('bg-blue-50'); wrap.className = wrap.className.replace('bg-white border-gray-200', 'bg-blue-600 border-blue-600'); if (svg) svg.setAttribute('class', svg.getAttribute('class').replace('text-gray-500', 'text-white')); if (label) label.classList.replace('text-gray-700', 'text-blue-700'); }
        else { t.classList.remove('bg-blue-50'); wrap.className = wrap.className.replace('bg-blue-600 border-blue-600', 'bg-white border-gray-200'); if (svg) svg.setAttribute('class', svg.getAttribute('class').replace('text-white', 'text-gray-500')); if (label) label.classList.replace('text-blue-700', 'text-gray-700'); }
      });
      panels.forEach(function (p) { if (p) p.classList.add('hidden'); });
      var panel = document.getElementById(tab.getAttribute('aria-controls'));
      if (panel) panel.classList.remove('hidden');
    }
    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 (idx !== null) { e.preventDefault(); tabs[idx].focus(); activate(tabs[idx]); }
      });
    });
  })();
</script>

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

# Icon Tabs

Tabs with icons.

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

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