Collection of free HTML and pure CSS tabs.
NAV TAB
Navigation tabs for two forms. Made with HTML / CSS by Ilham Ibnu Purnomo.
See the Pen
Nav Tab by Ilham Ibnu Purnomo (@inupurnomo)
on CodePen.
CSS TAB
Made with HTML / CSS by Wendy.
See the Pen
CSS Tab by Wendy (@Wendy-Ho)
on CodePen.
TABS
The + selector selects the next adjacent element. Historically this has been cool for styling labels. With CSS grid, an element can be next to another in markup, but somewhere totally different in display. This pen uses a simple input[type="radio"]:checked selector combined with a lot of +‘s to style different pages of an imaginary microsite. Made with HTML / CSS (SCSS) by eightarmshq.
See the Pen
“Next” to each other, but not _next_ to each other by eightarmshq (@EightArmsHQ)
on CodePen.
PURE CSS TABS
Radio version of tabs. Requirements: not rely on specific IDs for CSS (the CSS shouldn’t need to know specific IDs), flexible for any number of unkown tabs [2-6], accessible. Caveats: since these are checkboxes the tabs not tab-able, need to use arrow keys. Made with HTML / CSS by Mark Caron.
See the Pen
Pure CSS Tabs by Mark Caron (@markcaron)
on CodePen.
CSS TABS
Pure CSS vertical tabs. Made with HTML (Pug) / CSS (SCSS) by massimo.
See the Pen
css tabs by massimo (@_massimo)
on CodePen.
PURE CSS TABS WITH INDICATOR
Made with HTML / CSS (SCSS) by Alex.
See the Pen
Pure CSS Tabs With Indicator by Alex (@woranov)
on CodePen.
ANIMATED TRANSITION TABS
Animated transition tabs with checkboxes. Made with HTML / CSS by Flkt Crnpio.
See the Pen
Tabs. Pitaya CSS by Flkt Crnpio (@flkt-crnpio)
on CodePen.
PURE CSS COLOR TABS
No label pure CSS color tabs. Made with HTML (Pug) / CSS (SCSS) by ari.
See the Pen
Pure CSS Color Tabs (no label) by ari (@tari)
on CodePen.
CSS ONLY TABS
Material Design CSS only tabs. Made with HTML / CSS (SCSS) by Ben Mildren.
See the Pen
Material Design CSS Only Tabs by Ben Mildren (@mildrenben)
on CodePen.
CSS3 TABS
Responsive pure CSS3 tabs by Sorax. Made with HTML / CSS (SCSS) by YozhEzhi.
See the Pen
CSS3 Tabs by Sorax by YozhEzhi (@YozhEzhi)
on CodePen.
TAB CONTROLS USING HTML AND CSS
Clicking on the labels is effectively the same as clicking on the input boxes. The radio inputs are hidden with CSS. When a radio is selected, their curious tab content neighbors show up. That’s it! The only drawback is you won’t be able to style the selected tab without resorting to some JS, but that shouldn’t be a very big deal. Made with HTML (Pug) / CSS (Stylus) by Nicolas Bevacqua.
See the Pen
Tab controls using HTML and CSS, no JS! by Nicolas Bevacqua (@bevacqua)
on CodePen.
PURE CSS TABS
Made with HTML and CSS by Wallace Erick.
See the Pen
Pure CSS Tabs by Wallace Erick (@wallaceerick)
on CodePen.
