Tabs
Pure CSS demos—no JavaScript required for interactivity.
Pure CSS Tabs
Tab switching is driven by hidden radio inputs and the :checked selector. Click the labels to switch content.
Overview
This is the first panel. The active tab is controlled entirely by CSS using hidden radio inputs and the :checked pseudo-class. No JavaScript is involved.
Details
Second panel content. You can put any markup here—lists, forms, or more sections. The tab list and panels are siblings so that the general sibling combinator (~) can show the right panel.
Settings
Third panel. To add more tabs, add another radio input, a matching label in the tab list, and a panel with the corresponding class (e.g. panel-4), then extend the CSS selectors.
Slider pill tabs (CSS anchors)
Pill-style tabs using CSS Anchor Positioning. The hover highlight follows the tab under the cursor as you move between tabs; click and the active pill snaps to the selected tab. Requires a browser that supports anchor positioning (e.g. Chrome 125+).
Overview
This is the first panel. The active tab is controlled entirely by CSS using hidden radio inputs and the :checked pseudo-class. No JavaScript is involved.
Details
Second panel content. You can put any markup here—lists, forms, or more sections. The tab list and panels are siblings so that the general sibling combinator (~) can show the right panel.
Settings
Third panel. To add more tabs, add another radio input, a matching label in the tab list, and a panel with the corresponding class (e.g. panel-4), then extend the CSS selectors.