Open demo

CSS code

HTML 
<div class="w">
  <div class="hd"><h2>Simple pricing</h2><p>Every plan includes the whole library.</p></div>
  <div class="tabs" role="radiogroup" aria-label="Billing period">
    <input type="radio" name="v" id="v1" checked><label for="v1">Monthly</label>
    <input type="radio" name="v" id="v2"><label for="v2">Yearly <i><span aria-hidden="true">−20%</span><span class="sr-only">save 20%</span></i></label>
  </div>
  <div class="body">
    <div class="p p1"><div class="plans">
      <div class="plan"><b>Starter</b><p class="amt">£15</p><p class="per">per month</p>
        <ul><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Three projects</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> 7-day history</li></ul></div>
      <div class="plan best"><b>Team</b><p class="amt">£36</p><p class="per">per month</p>
        <ul><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Unlimited projects</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> 90-day history</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Audit log</li></ul></div>
      <div class="plan"><b>Scale</b><p class="amt">£99</p><p class="per">per month</p>
        <ul><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Everything in Team</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> SSO and SCIM</li></ul></div>
    </div></div>
    <div class="p p2"><div class="plans">
      <div class="plan"><b>Starter</b><p class="amt">£12</p><p class="per">per month, billed yearly</p>
        <ul><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Three projects</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> 7-day history</li></ul></div>
      <div class="plan best"><b>Team</b><p class="amt">£29</p><p class="per">per month, billed yearly</p>
        <ul><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Unlimited projects</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> 90-day history</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Audit log</li></ul></div>
      <div class="plan"><b>Scale</b><p class="amt">£79</p><p class="per">per month, billed yearly</p>
        <ul><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Everything in Team</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> SSO and SCIM</li></ul></div>
    </div></div>
  </div>
</div>
CSS 
/* Pricing tabs, CSS only: a Monthly / Yearly radio group styled as a segmented switch swaps the whole plan grid.
   :has() shows the grid for the checked radio; the grid stacks under 560px. */
.w{width:100%;max-width:580px;padding:24px 26px 26px;background:#fff;border:1px solid #e3e8f2;border-radius:16px;
  box-shadow:0 16px 38px -24px rgba(16,24,48,.24)}
.hd{text-align:center;margin-bottom:18px}
.hd h2{font-size:1.05rem;letter-spacing:-.01em;margin:0}
.hd p{font-size:.83rem;color:#5d6a86;margin:3px 0 0}
.tabs{display:flex;gap:4px;background:#f2f5fa;border-radius:11px;padding:4px;margin:0 auto 22px;width:max-content;position:relative}
.tabs input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.tabs label{padding:8px 20px;border-radius:8px;font-size:.85rem;font-weight:700;color:#5d6a86;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.tabs label i{font-style:normal;font-size:.7rem;font-weight:800;background:#dcfce7;color:#166534;padding:2px 7px;border-radius:999px}
.tabs input:checked+label{background:#fff;color:#16203a;box-shadow:0 1px 3px rgba(16,24,48,.16)}
.tabs input:focus-visible+label{outline:2px solid #4f46e5;outline-offset:2px}
.body .p{display:none}
.w:has(#v1:checked) .p1,.w:has(#v2:checked) .p2{display:block}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.plan{border:1px solid #e3e8f2;border-radius:13px;padding:18px 16px}
.plan.best{border-color:#4f46e5;box-shadow:0 0 0 3px #eef2ff}
.plan b{font-size:.85rem;display:block}
.plan .amt{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;margin:8px 0 2px}
.plan .per{font-size:.74rem;color:#64708a;margin:0}
.plan ul{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:.79rem;color:#4a5670}
.plan li{display:flex;gap:7px;align-items:flex-start}
.plan svg{width:13px;height:13px;stroke:#4f46e5;fill:none;stroke-width:3;flex-shrink:0;margin-top:3px}
@media (max-width:560px){.plans{grid-template-columns:1fr}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<div class="w">
  <div class="hd"><h2>Simple pricing</h2><p>Every plan includes the whole library.</p></div>
  <div class="nav nav-pills tabs" role="tablist" aria-label="Billing period">
    <button class="nav-link active" id="billing-monthly-tab" data-bs-toggle="pill" data-bs-target="#billing-monthly" type="button" role="tab" aria-controls="billing-monthly" aria-selected="true">Monthly</button>
    <button class="nav-link" id="billing-yearly-tab" data-bs-toggle="pill" data-bs-target="#billing-yearly" type="button" role="tab" aria-controls="billing-yearly" aria-selected="false" tabindex="-1">Yearly <span class="badge rounded-pill"><span aria-hidden="true">−20%</span><span class="visually-hidden">save 20%</span></span></button>
  </div>
  <div class="tab-content">
    <div class="tab-pane active" id="billing-monthly" role="tabpanel" aria-labelledby="billing-monthly-tab" tabindex="0">
      <div class="row row-cols-1 row-cols-sm-3 plans">
        <div class="col"><div class="card plan"><div class="card-body"><b>Starter</b><p class="amt">£15</p><p class="per">per month</p>
          <ul><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Three projects</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> 7-day history</li></ul></div></div></div>
        <div class="col"><div class="card plan best"><div class="card-body"><b>Team</b><p class="amt">£36</p><p class="per">per month</p>
          <ul><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Unlimited projects</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> 90-day history</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Audit log</li></ul></div></div></div>
        <div class="col"><div class="card plan"><div class="card-body"><b>Scale</b><p class="amt">£99</p><p class="per">per month</p>
          <ul><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Everything in Team</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> SSO and SCIM</li></ul></div></div></div>
      </div>
    </div>
    <div class="tab-pane" id="billing-yearly" role="tabpanel" aria-labelledby="billing-yearly-tab" tabindex="0">
      <div class="row row-cols-1 row-cols-sm-3 plans">
        <div class="col"><div class="card plan"><div class="card-body"><b>Starter</b><p class="amt">£12</p><p class="per">per month, billed yearly</p>
          <ul><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Three projects</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> 7-day history</li></ul></div></div></div>
        <div class="col"><div class="card plan best"><div class="card-body"><b>Team</b><p class="amt">£29</p><p class="per">per month, billed yearly</p>
          <ul><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Unlimited projects</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> 90-day history</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Audit log</li></ul></div></div></div>
        <div class="col"><div class="card plan"><div class="card-body"><b>Scale</b><p class="amt">£79</p><p class="per">per month, billed yearly</p>
          <ul><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Everything in Team</li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> SSO and SCIM</li></ul></div></div></div>
      </div>
    </div>
  </div>
</div>
CSS 
/* Pricing tabs: a two-item Bootstrap .nav-pills segmented switch and the Tab plugin swap a grid of .card plans
   (.row-cols-sm-3, stacking on phones). The yearly saving is a .badge. */
.w{width:100%;max-width:580px;padding:24px 26px 26px;background:#fff;border:1px solid #e3e8f2;border-radius:16px;
  box-shadow:0 16px 38px -24px rgba(16,24,48,.24)}
.hd{text-align:center;margin-bottom:18px}
.hd h2{font-size:1.05rem;font-weight:700;line-height:normal;letter-spacing:-.01em;margin:0}
.hd p{font-size:.83rem;color:#5d6a86;margin:3px 0 0}
.tabs{--bs-nav-link-padding-x:20px;--bs-nav-link-padding-y:8px;--bs-nav-link-font-size:.85rem;--bs-nav-link-font-weight:700;
  --bs-nav-link-color:#5d6a86;--bs-nav-link-hover-color:#16203a;--bs-nav-pills-border-radius:8px;
  --bs-nav-pills-link-active-bg:#fff;--bs-nav-pills-link-active-color:#16203a;
  flex-wrap:nowrap;gap:4px;background:#f2f5fa;border-radius:11px;padding:4px;margin:0 auto 22px;width:max-content}
.tabs .nav-link{display:inline-flex;align-items:center;gap:8px;line-height:normal}
.tabs .nav-link.active{box-shadow:0 1px 3px rgba(16,24,48,.16)}
.tabs .nav-link:focus-visible{box-shadow:none;outline:2px solid #4f46e5;outline-offset:2px}
.tabs .badge{--bs-badge-padding-x:7px;--bs-badge-padding-y:2px;--bs-badge-font-size:.7rem;--bs-badge-font-weight:800;
  --bs-badge-color:#166534;background:#dcfce7}
.plans{--bs-gutter-x:12px;--bs-gutter-y:12px}
.w .tab-pane:focus-visible{outline:2px solid #4f46e5;outline-offset:4px;border-radius:13px}
.plan{--bs-card-border-color:#e3e8f2;--bs-card-border-radius:13px;--bs-card-spacer-y:18px;--bs-card-spacer-x:16px;height:100%}
.plan.best{--bs-card-border-color:#4f46e5;box-shadow:0 0 0 3px #eef2ff}
.plan b{font-size:.85rem;display:block}
.plan .amt{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;margin:8px 0 2px}
.plan .per{font-size:.74rem;color:#64708a;margin:0}
.plan ul{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:.79rem;color:#4a5670}
.plan li{display:flex;gap:7px;align-items:flex-start}
.plan svg{width:13px;height:13px;stroke:#4f46e5;fill:none;stroke-width:3;flex-shrink:0;margin-top:3px}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="w-full max-w-[580px] rounded-2xl border border-tab-line bg-white px-[26px] pt-6 pb-[26px] shadow-[0_16px_38px_-24px_rgba(16,24,48,.24)]">
  <div class="mb-[18px] text-center"><h2 class="text-[1.05rem] font-bold tracking-[-.01em]">Simple pricing</h2><p class="mt-[3px] text-[.83rem] text-tab-muted">Every plan includes the whole library.</p></div>
  <div class="mx-auto mb-[22px] flex w-max gap-1 rounded-[11px] bg-tab-soft p-1" role="tablist" aria-label="Billing period">
    <button type="button" role="tab" id="billing-monthly-tab" aria-controls="billing-monthly" aria-selected="true" class="cursor-pointer inline-flex items-center gap-2 rounded-lg px-5 py-2 text-[.85rem] font-bold text-tab-muted hover:text-tab-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tab-accent aria-selected:bg-white aria-selected:text-tab-ink aria-selected:shadow-[0_1px_3px_rgba(16,24,48,.16)]">Monthly</button>
    <button type="button" role="tab" id="billing-yearly-tab" aria-controls="billing-yearly" aria-selected="false" tabindex="-1" class="cursor-pointer inline-flex items-center gap-2 rounded-lg px-5 py-2 text-[.85rem] font-bold text-tab-muted hover:text-tab-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tab-accent aria-selected:bg-white aria-selected:text-tab-ink aria-selected:shadow-[0_1px_3px_rgba(16,24,48,.16)]">Yearly <i class="rounded-full bg-[#dcfce7] px-[7px] py-0.5 text-[.7rem] font-extrabold text-[#166534] not-italic"><span aria-hidden="true">−20%</span><span class="sr-only">save 20%</span></i></button>
  </div>
  <div id="billing-monthly" role="tabpanel" aria-labelledby="billing-monthly-tab" tabindex="0" class="rounded-[13px] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-tab-accent">
    <div class="grid grid-cols-3 gap-3 max-[560px]:grid-cols-1">
      <div class="rounded-[13px] border px-4 py-[18px] border-tab-line"><b class="block text-[.85rem]">Starter</b><p class="mt-2 mb-0.5 text-[1.6rem] font-extrabold tracking-[-.03em]">£15</p><p class="text-[.74rem] text-tab-hint">per month</p>
        <ul class="mt-[13px] flex flex-col gap-[7px] text-[.79rem] text-tab-body"><li class="flex items-start gap-[7px]"><svg class="mt-[3px] size-[13px] shrink-0 fill-none stroke-tab-accent stroke-3" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Three projects</li><li class="flex items-start gap-[7px]"><svg class="mt-[3px] size-[13px] shrink-0 fill-none stroke-tab-accent stroke-3" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> 7-day history</li></ul></div>
      <div class="rounded-[13px] border px-4 py-[18px] border-tab-accent shadow-[0_0_0_3px_var(--color-tab-tint)]"><b class="block text-[.85rem]">Team</b><p class="mt-2 mb-0.5 text-[1.6rem] font-extrabold tracking-[-.03em]">£36</p><p class="text-[.74rem] text-tab-hint">per month</p>
        <ul class="mt-[13px] flex flex-col gap-[7px] text-[.79rem] text-tab-body"><li class="flex items-start gap-[7px]"><svg class="mt-[3px] size-[13px] shrink-0 fill-none stroke-tab-accent stroke-3" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Unlimited projects</li><li class="flex items-start gap-[7px]"><svg class="mt-[3px] size-[13px] shrink-0 fill-none stroke-tab-accent stroke-3" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> 90-day history</li><li class="flex items-start gap-[7px]"><svg class="mt-[3px] size-[13px] shrink-0 fill-none stroke-tab-accent stroke-3" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Audit log</li></ul></div>
      <div class="rounded-[13px] border px-4 py-[18px] border-tab-line"><b class="block text-[.85rem]">Scale</b><p class="mt-2 mb-0.5 text-[1.6rem] font-extrabold tracking-[-.03em]">£99</p><p class="text-[.74rem] text-tab-hint">per month</p>
        <ul class="mt-[13px] flex flex-col gap-[7px] text-[.79rem] text-tab-body"><li class="flex items-start gap-[7px]"><svg class="mt-[3px] size-[13px] shrink-0 fill-none stroke-tab-accent stroke-3" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Everything in Team</li><li class="flex items-start gap-[7px]"><svg class="mt-[3px] size-[13px] shrink-0 fill-none stroke-tab-accent stroke-3" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> SSO and SCIM</li></ul></div>
    </div>
  </div>
  <div id="billing-yearly" role="tabpanel" aria-labelledby="billing-yearly-tab" tabindex="0" hidden class="rounded-[13px] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-tab-accent">
    <div class="grid grid-cols-3 gap-3 max-[560px]:grid-cols-1">
      <div class="rounded-[13px] border px-4 py-[18px] border-tab-line"><b class="block text-[.85rem]">Starter</b><p class="mt-2 mb-0.5 text-[1.6rem] font-extrabold tracking-[-.03em]">£12</p><p class="text-[.74rem] text-tab-hint">per month, billed yearly</p>
        <ul class="mt-[13px] flex flex-col gap-[7px] text-[.79rem] text-tab-body"><li class="flex items-start gap-[7px]"><svg class="mt-[3px] size-[13px] shrink-0 fill-none stroke-tab-accent stroke-3" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Three projects</li><li class="flex items-start gap-[7px]"><svg class="mt-[3px] size-[13px] shrink-0 fill-none stroke-tab-accent stroke-3" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> 7-day history</li></ul></div>
      <div class="rounded-[13px] border px-4 py-[18px] border-tab-accent shadow-[0_0_0_3px_var(--color-tab-tint)]"><b class="block text-[.85rem]">Team</b><p class="mt-2 mb-0.5 text-[1.6rem] font-extrabold tracking-[-.03em]">£29</p><p class="text-[.74rem] text-tab-hint">per month, billed yearly</p>
        <ul class="mt-[13px] flex flex-col gap-[7px] text-[.79rem] text-tab-body"><li class="flex items-start gap-[7px]"><svg class="mt-[3px] size-[13px] shrink-0 fill-none stroke-tab-accent stroke-3" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Unlimited projects</li><li class="flex items-start gap-[7px]"><svg class="mt-[3px] size-[13px] shrink-0 fill-none stroke-tab-accent stroke-3" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> 90-day history</li><li class="flex items-start gap-[7px]"><svg class="mt-[3px] size-[13px] shrink-0 fill-none stroke-tab-accent stroke-3" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Audit log</li></ul></div>
      <div class="rounded-[13px] border px-4 py-[18px] border-tab-line"><b class="block text-[.85rem]">Scale</b><p class="mt-2 mb-0.5 text-[1.6rem] font-extrabold tracking-[-.03em]">£79</p><p class="text-[.74rem] text-tab-hint">per month, billed yearly</p>
        <ul class="mt-[13px] flex flex-col gap-[7px] text-[.79rem] text-tab-body"><li class="flex items-start gap-[7px]"><svg class="mt-[3px] size-[13px] shrink-0 fill-none stroke-tab-accent stroke-3" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Everything in Team</li><li class="flex items-start gap-[7px]"><svg class="mt-[3px] size-[13px] shrink-0 fill-none stroke-tab-accent stroke-3" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> SSO and SCIM</li></ul></div>
    </div>
  </div>
</div>
CSS 
@theme {
  --color-tab-ink: #16203a;
  --color-tab-body: #4a5670;
  --color-tab-muted: #5d6a86;
  --color-tab-hint: #64708a;
  --color-tab-line: #e3e8f2;
  --color-tab-soft: #f2f5fa;
  --color-tab-tint: #eef2ff;
  --color-tab-accent: #4f46e5;
}
JavaScript 
// WAI-ARIA tabs: click or arrow keys select a tab, Home/End jump to the ends, only the selected tab is in the Tab order.
for (const list of document.querySelectorAll('[role=tablist]')) {
  const tabs = [...list.querySelectorAll('[role=tab]')];
  const select = tab => tabs.forEach(t => {
    const on = t === tab;
    t.setAttribute('aria-selected', on);
    t.tabIndex = on ? 0 : -1;
    document.getElementById(t.getAttribute('aria-controls')).hidden = !on;
  });
  list.addEventListener('click', e => { const t = e.target.closest('[role=tab]'); if (t && !t.disabled) select(t); });
  list.addEventListener('keydown', e => {
    const live = tabs.filter(t => !t.disabled), i = live.indexOf(e.target);
    const n = { ArrowLeft: i - 1, ArrowUp: i - 1, ArrowRight: i + 1, ArrowDown: i + 1, Home: 0, End: live.length - 1 }[e.key];
    if (n === undefined || i < 0) return;
    e.preventDefault();
    const t = live[(n + live.length) % live.length];
    t.focus();
    select(t);
  });
}

About this set

A pricing section where a Monthly and Yearly switch swaps the whole plan grid, not just the numbers. It has a centred heading, a two-option segmented switch with a green minus 20 percent badge on Yearly, and three plan cards, Starter, Team and Scale, each with a price, a billing note and a ticked feature list. The recommended plan has an indigo border and a soft ring. Use it on pricing pages where the yearly plans differ in wording as well as price, such as billed yearly notes, since each period has its own complete grid. The cards sit three across and stack into one column on phones. The badge is read as save 20% rather than as a minus sign, and the ticks are hidden from screen readers. The plain CSS version is a radio group with :has() choosing the grid. The Bootstrap version uses a two-item .nav-pills with the Tab plugin, a .badge and .card plans in a .row-cols-sm-3 grid. The Tailwind version uses a small WAI-ARIA tabs script.

What’s included

  • Switches the whole plan grid between monthly and yearly
  • Recommended plan highlighted with a border and ring
  • Saving badge read as save 20% by screen readers
  • Three columns that stack on phones
  • Bootstrap version uses .nav-pills, .badge and .card

Accessibility

In the plain CSS version the tabs are a radio group, not ARIA tabs: the radios sit inside an element with role="radiogroup" and an aria-label, each takes its name from its visible label, Tab enters the group and the arrow keys move the selection (radios have no Home or End). In the Bootstrap and Tailwind versions they follow the WAI-ARIA tabs pattern: role tablist, tab and tabpanel, aria-selected, aria-controls, a roving tabindex, arrow keys plus Home and End. The feature ticks are aria-hidden and the saving badge has visually hidden text. Focus shows a 2px indigo outline around the segment.

Customise it

Change the switch colours in .tabs (plain CSS), the --bs-nav-pills-* and --bs-badge-* variables (Bootstrap) or the --color-tab-* theme colours (Tailwind). The recommended plan colours are the .plan.best border and ring, or border-tab-accent with the tint shadow.