Card 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

<div class="w-full max-w-4xl">
  <div role="tablist" aria-label="Choose a plan" class="grid grid-cols-1 sm:grid-cols-3 gap-4">
    <button role="tab" id="xtab-starter" aria-selected="false" aria-controls="xpanel-starter" tabindex="-1"
      class="text-left rounded-2xl border-2 border-gray-200 bg-white p-5 transition-all hover:border-gray-300 hover:shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500">
      <div class="flex items-center justify-between">
        <span class="text-sm font-semibold text-gray-900">Starter</span>
        <span class="w-5 h-5 rounded-full border-2 border-gray-300"></span>
      </div>
      <p class="mt-3 text-3xl font-bold text-gray-900">$0<span class="text-sm font-medium text-gray-500">/mo</span></p>
      <p class="mt-1 text-xs text-gray-500">For side projects</p>
    </button>

    <button role="tab" id="xtab-pro" aria-selected="true" aria-controls="xpanel-pro" tabindex="0"
      class="relative text-left rounded-2xl border-2 border-emerald-500 bg-white p-5 transition-all shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500">
      <span class="absolute -top-2.5 right-4 text-[10px] font-bold uppercase tracking-wide text-white bg-emerald-500 px-2 py-0.5 rounded-full">Popular</span>
      <div class="flex items-center justify-between">
        <span class="text-sm font-semibold text-gray-900">Pro</span>
        <span class="w-5 h-5 rounded-full bg-emerald-500 flex items-center justify-center"><svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></span>
      </div>
      <p class="mt-3 text-3xl font-bold text-gray-900">$29<span class="text-sm font-medium text-gray-500">/mo</span></p>
      <p class="mt-1 text-xs text-gray-500">For growing teams</p>
    </button>

    <button role="tab" id="xtab-enterprise" aria-selected="false" aria-controls="xpanel-enterprise" tabindex="-1"
      class="text-left rounded-2xl border-2 border-gray-200 bg-white p-5 transition-all hover:border-gray-300 hover:shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500">
      <div class="flex items-center justify-between">
        <span class="text-sm font-semibold text-gray-900">Enterprise</span>
        <span class="w-5 h-5 rounded-full border-2 border-gray-300"></span>
      </div>
      <p class="mt-3 text-3xl font-bold text-gray-900">Custom</p>
      <p class="mt-1 text-xs text-gray-500">For large orgs</p>
    </button>
  </div>

  <div class="mt-5">
    <div role="tabpanel" id="xpanel-starter" aria-labelledby="xtab-starter" tabindex="0" class="hidden rounded-2xl border border-gray-200 bg-white p-6 focus:outline-none">
      <h3 class="text-lg font-semibold text-gray-900">Starter plan</h3>
      <p class="text-sm text-gray-500">Everything you need to launch your first project.</p>
      <ul class="mt-4 space-y-2 text-sm text-gray-700">
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> 1 project</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Community support</li>
      </ul>
    </div>
    <div role="tabpanel" id="xpanel-pro" aria-labelledby="xtab-pro" tabindex="0" class="rounded-2xl border border-emerald-200 bg-emerald-50/40 p-6 focus:outline-none">
      <h3 class="text-lg font-semibold text-gray-900">Pro plan</h3>
      <p class="text-sm text-gray-500">Scale without limits with advanced collaboration.</p>
      <ul class="mt-4 space-y-2 text-sm text-gray-700">
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Unlimited projects</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Priority support</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Advanced analytics</li>
      </ul>
      <button class="mt-5 w-full text-sm font-semibold text-white bg-emerald-600 hover:bg-emerald-700 rounded-lg px-4 py-2.5 transition-colors">Choose Pro</button>
    </div>
    <div role="tabpanel" id="xpanel-enterprise" aria-labelledby="xtab-enterprise" tabindex="0" class="hidden rounded-2xl border border-gray-200 bg-white p-6 focus:outline-none">
      <h3 class="text-lg font-semibold text-gray-900">Enterprise plan</h3>
      <p class="text-sm text-gray-500">Security, control, and support for your whole organization.</p>
      <ul class="mt-4 space-y-2 text-sm text-gray-700">
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> SSO & SAML</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Dedicated manager</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> 99.99% uptime SLA</li>
      </ul>
      <button class="mt-5 w-full text-sm font-semibold text-gray-900 bg-gray-100 hover:bg-gray-200 rounded-lg px-4 py-2.5 transition-colors">Contact sales</button>
    </div>
  </div>
</div>

<script>
  (function () {
    var list = document.querySelector('[aria-label="Choose a plan"]');
    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 dot = t.querySelector('span.w-5');
        if (s) { t.classList.add('border-emerald-500', 'shadow-sm'); t.classList.remove('border-gray-200'); if (dot) { dot.className = 'w-5 h-5 rounded-full bg-emerald-500 flex items-center justify-center'; dot.innerHTML = '<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>'; } }
        else { t.classList.remove('border-emerald-500', 'shadow-sm'); t.classList.add('border-gray-200'); if (dot) { dot.className = 'w-5 h-5 rounded-full border-2 border-gray-300'; dot.innerHTML = ''; } }
      });
      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 (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

# Card Tabs

Card-style tabs.

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

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