← All elements
<div class="tabs"><input type="radio" name="t" id="a" checked><label for="a">Design</label><input type="radio" name="t" id="b"><label for="b">Code</label><input type="radio" name="t" id="c"><label for="c">Ship</label><div class="p p1">Sketch the idea first.</div><div class="p p2">Write the smallest CSS that works.</div><div class="p p3">Publish and share the link.</div></div>About this navigation bar
Tabbed content where each tab is a radio input and :checked reveals the matching panel using sibling selectors.
How it works
Each tab is a radio input followed by its label, and the panels come after them in the same container. Sibling selectors such as #c:checked ~ .p3 show the panel that matches the chosen radio and hide the rest. The active label gets its own colour and border from input:checked + label.
Ways to customise it
- Add a fourth radio, label and panel, and one more selector line.
- Change the accent border colour to restyle the active tab.
- Use display: grid on the container if you want tabs in a different layout.
Good to know
Radios give arrow-key navigation inside the group. For complex apps use proper ARIA tab roles with script, but for simple content switching this pattern is robust and works without JavaScript.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.