Tabs component design
A minimal tabbed interface built with native HTML radio inputs and Tailwind CSS peer utilities. No JavaScript required.
Preview
Account settings content appears here.
Usage
Wrap radio inputs inside labels, hide the native control, and style the label based on peer-checked: state. Group tabs by sharing a name attribute.
Variants
- Pill style — replace rounded-t-lg with rounded-full and use a flex gap-0 container with bg-[#8B5CF6]/5 padding.
- Underline indicator — use a single bottom border that slides via peer-checked:translate-x-* on a pseudo-element.
- Vertical tabs — stack labels in a column with border-l instead of border-b.