Tabs Pills

<div class="ws-tabs mx-auto max-w-3xl px-6 py-12">
  <div role="tablist" aria-label="Content tabs" class="inline-flex gap-1 rounded-lg bg-[var(--ws-tabs-border)]/20 p-1">
    <button role="tab" id="pill-tab-1" aria-selected="true" aria-controls="pill-panel-1" class="rounded-md bg-[var(--ws-tabs-bg)] px-4 py-2 text-sm font-semibold text-[var(--ws-tabs-active-text)] shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2" onclick="switchPillTab(this, 'pill-panel-1')">Overview</button>
    <button role="tab" id="pill-tab-2" aria-selected="false" aria-controls="pill-panel-2" class="rounded-md px-4 py-2 text-sm font-medium text-[var(--ws-tabs-text)] hover:text-[var(--ws-tabs-active-text)] focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2" onclick="switchPillTab(this, 'pill-panel-2')">Features</button>
    <button role="tab" id="pill-tab-3" aria-selected="false" aria-controls="pill-panel-3" class="rounded-md px-4 py-2 text-sm font-medium text-[var(--ws-tabs-text)] hover:text-[var(--ws-tabs-active-text)] focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2" onclick="switchPillTab(this, 'pill-panel-3')">Pricing</button>
  </div>

  <div id="pill-panel-1" role="tabpanel" aria-labelledby="pill-tab-1" class="py-6">
    <h3 class="text-lg font-semibold text-[var(--ws-tabs-active-text)]">Overview</h3>
    <p class="mt-2 text-[var(--ws-tabs-text)]">This is the overview panel. It provides a high-level summary of the product, its purpose, and the value it delivers to users.</p>
  </div>
  <div id="pill-panel-2" role="tabpanel" aria-labelledby="pill-tab-2" class="hidden py-6">
    <h3 class="text-lg font-semibold text-[var(--ws-tabs-active-text)]">Features</h3>
    <p class="mt-2 text-[var(--ws-tabs-text)]">Explore the full feature set including responsive design, dark mode support, accessibility compliance, and copy-paste simplicity.</p>
  </div>
  <div id="pill-panel-3" role="tabpanel" aria-labelledby="pill-tab-3" class="hidden py-6">
    <h3 class="text-lg font-semibold text-[var(--ws-tabs-active-text)]">Pricing</h3>
    <p class="mt-2 text-[var(--ws-tabs-text)]">All patterns are free and open source. Use them in personal and commercial projects without any restrictions.</p>
  </div>

  <script>
    function switchPillTab(selectedTab, panelId) {
      var tablist = selectedTab.closest('[role="tablist"]');
      var container = tablist.parentElement;
      tablist.querySelectorAll('[role="tab"]').forEach(function(tab) {
        tab.setAttribute('aria-selected', 'false');
        tab.className = 'rounded-md px-4 py-2 text-sm font-medium text-[var(--ws-tabs-text)] hover:text-[var(--ws-tabs-active-text)] focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2';
      });
      selectedTab.setAttribute('aria-selected', 'true');
      selectedTab.className = 'rounded-md bg-[var(--ws-tabs-bg)] px-4 py-2 text-sm font-semibold text-[var(--ws-tabs-active-text)] shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2';
      container.querySelectorAll('[role="tabpanel"]').forEach(function(panel) {
        panel.classList.add('hidden');
      });
      container.querySelector('#' + panelId).classList.remove('hidden');
    }
  </script>
</div>