Collection of free HTML & CSS tabs. Updated with 1 item on May 11, 2020
Create stunning web pages using these free CSS tabs. They’re easy to customize and they’ll help you create great-looking sites.
Responsive Tabs
The pattern is a collapsable section at small screen sizes and horizontal tabs at larger screen sizes.
See the Pen Responsive Tabs (v1.1) by Aaron Pinero (@aaronpinero) on CodePen.
Developed using HTML, SCSS, JS
Author: Aaron Pinero | Created on July 18, 2014 | Updated on January 26, 2018
Light Tabs
Author: Alex Lime | Created on August 27, 2013 | Updated on February 1, 2017
Responsive Accordion to Tabs
Author: Stuart Robson | Created on October 10, 2012 | Updated on May 28, 2015
Responsive CSS Tabs
The underlying code creates CSS Tabs controlled by radio/checkbox inputs. That part is simple and has been done before.
What was new for me was discovering how I could use the float isolation method to layer all the tab content on the z-axis, keeping the container responsive to all the content, even the hidden tabs.
- The container wraps all tabs dynamically
- Container size remains equal across tabs
- No JS Height calculations
- The entire thing is responsive
Author: huwd | Created on April 6, 2013 | Updated on April 6, 2013
jQuery Tabs
Author: Srdjan Pajdic | Created on February 9, 2014 | Updated on August 29, 2017
Responsive Tabbed Content
working on tabbed content snippets for future use.
Author: Vince Brown | Created on June 16, 2014 | Updated on June 17, 2014
Simple Tabs
Nothing too fancy going on here. Just working on some clean-looking tabs for my blog.
Author: John D. Jameson | Created on April 26, 2014 | Updated on April 28, 2014
Pure CSS Tab
Just CSS, no JS!
Author: Wallace Erick | Created on October 5, 2013 | Updated on November 26, 2016
Quick and Simple Tabs
A quick and easy method for tabs that supports multiple tab groups on one page.
Author: Todd Gallimore | Created on September 27, 2013 | Updated on October 29, 2013
SVG Tabs
Author: Chris Coyier | Created on November 27, 2013 | Updated on December 4, 2013
Minimal Tabs using jQuery UI
Just some interesting CSS for tabbed content 🙂 Minimal and responsive, and has a dark version, too now.
Author: Simon Goellner | Created on September 10, 2013 | Updated on November 26, 2016
Transformer Tabs
RWD n stuff!
One set of semantic HTML. One set of JS.
Tabs that turn into a small-screen-capable tap-to-reveal fully-functional system.
I used to use <select> sometimes for this but that’s different markup and different JS and that sucks. Plus this is easier (funner) to style.
Author: Chris Coyier | Created on November 3, 2013 | Updated on March 13, 2020
Simple Tab using CSS
Author: Renato Ribeiro | Created on October 27, 2014 | Updated on March 28, 2015
Responsive Horizontal Bootstrap Scroll Nav
Author: Frank | Created on September 16, 2014 | Updated on November 10, 2015
Adaptive tabs
Tabs that animate to the height of their content when switched.
Author: Lewi Hussey | Created on June 28, 2015 | Updated on June 28, 2015
Fantabulous Tabs Simple Javascript animated tabs
A very small javascript, html5, and CSS animated tabs.
Author: Stephen Nelson | Created on June 9, 2015 | Updated on June 9, 2015
jQuery tabs
Author: ihzh | Created on June 29, 2015 | Updated on January 18, 2016
Tabs Navigation UI
Author: Natalia Davydova | Created on August 3, 2019 | Updated on August 3, 2019
Leave a Reply