devsnips
Search docs, APIs, guides…

Component

Card Tabs

Card switching interface where each tab is a selectable pricing card with a radio-style indicator. Selecting a card reveals its feature panel. Ideal for plan pickers.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Selectable cards
  • Radio indicator
  • Popular badge
  • Feature panels
  • Arrow-key navigation

Preview

Live component

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

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Tabs/card-tabs
registry path: Tailwind/Components/Tabs/card-tabs

Source

Implementation

code.html 
<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>
97 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/tabs/card-tabs
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/tabs/card-tabs/

Install: npx devsnips add
Tailwind/Components/Tabs/card-tabs

This is the Card Tabs — Card switching interface where each tab is a selectable pricing card with a radio-style indicator. Selecting a card reveals its feature panel. Ideal for plan pickers.

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/tabs/card-tabs