Tabs

Radio inputs wearing tab clothes. Arrow-key switching comes free — it's the native radio group behavior.

plain CSS — works everywhere

PreviewCode

<div class="flex w-full max-w-lg flex-wrap gap-x-1">
  <input type="radio" name="tabs-settings" id="tabs-settings-account" class="peer/account sr-only" checked />
  <input type="radio" name="tabs-settings" id="tabs-settings-password" class="peer/password sr-only" />
  <input type="radio" name="tabs-settings" id="tabs-settings-team" class="peer/team sr-only" />

  <label
    for="tabs-settings-account"
    class="cursor-pointer border-b-2 border-transparent px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground peer-checked/account:border-primary peer-checked/account:text-foreground peer-focus-visible/account:outline-2 peer-focus-visible/account:outline-offset-2 peer-focus-visible/account:outline-ring"
  >
    Account
  </label>
  <label
    for="tabs-settings-password"
    class="cursor-pointer border-b-2 border-transparent px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground peer-checked/password:border-primary peer-checked/password:text-foreground peer-focus-visible/password:outline-2 peer-focus-visible/password:outline-offset-2 peer-focus-visible/password:outline-ring"
  >
    Password
  </label>
  <label
    for="tabs-settings-team"
    class="cursor-pointer border-b-2 border-transparent px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground peer-checked/team:border-primary peer-checked/team:text-foreground peer-focus-visible/team:outline-2 peer-focus-visible/team:outline-offset-2 peer-focus-visible/team:outline-ring"
  >
    Team
  </label>

  <div class="hidden basis-full pt-4 text-sm text-muted-foreground peer-checked/account:block">
    Change your display name and avatar. Your account, your rules.
  </div>
  <div class="hidden basis-full pt-4 text-sm text-muted-foreground peer-checked/password:block">
    Use a long passphrase. Password managers love this one weird trick.
  </div>
  <div class="hidden basis-full pt-4 text-sm text-muted-foreground peer-checked/team:block">
    Invite teammates and assign roles. Seats are unlimited, opinions are not.
  </div>
</div>

How it works

Three sr-only radios, three labels as triggers, three panels — all siblings, because Tailwind’s peer-checked/name: needs the radio to precede what it styles.
flex flex-wrap + basis-full on the panels puts triggers on one row and the active panel below, no wrapper divs needed.
peer-focus-visible/name: draws the focus ring on the label when the (visually hidden) radio has keyboard focus.

The honest accessibility trade-off

This announces as a radio group, not a tablist — because it is a radio group. Don’t bolt role="tab" onto it: mixing ARIA tab semantics with radio behavior confuses screen readers more than either alone. Arrow keys move between options and Tab leaves the group, which is exactly what ARIA tabs require — you’re trading the “tab” announcement for zero JavaScript. If your accessibility review demands true tablist semantics, that’s a legitimate reason to reach for a JS implementation.

When the panels hold heavy content

hidden removes inactive panels from the accessibility tree and find-in-page. If that matters, consider separate pages — tabs hiding important content is usually an information-architecture smell anyway.