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
![18 Free CSS Tabs for Designing Websites 1 Light Tabs](https://www.w3tweaks.com/wp-content/uploads/2020/05/Light-Sexy-Tabs-1024x583.png)
Author: Alex Lime | Created on August 27, 2013 | Updated on February 1, 2017
Responsive Accordion to Tabs
![18 Free CSS Tabs for Designing Websites 2 Responsive Accordion to Tabs](https://www.w3tweaks.com/wp-content/uploads/2020/05/Responsive-Accordion-to-Tabs-1024x583.png)
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
![18 Free CSS Tabs for Designing Websites 3 Responsive CSS Tabs](https://www.w3tweaks.com/wp-content/uploads/2020/05/Responsive-CSS-Tabs-1024x583.png)
Author: huwd | Created on April 6, 2013 | Updated on April 6, 2013
jQuery Tabs
![18 Free CSS Tabs for Designing Websites 4 jQuery Tabs](https://www.w3tweaks.com/wp-content/uploads/2020/05/jQuery-Sexy-Tabs-1024x583.png)
Author: Srdjan Pajdic | Created on February 9, 2014 | Updated on August 29, 2017
Responsive Tabbed Content
working on tabbed content snippets for future use.
![18 Free CSS Tabs for Designing Websites 5 Responsive Tabbed Content](https://www.w3tweaks.com/wp-content/uploads/2020/05/Responsive-Tabbed-Content-1024x583.png)
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.
![18 Free CSS Tabs for Designing Websites 6 Simple Tabs](https://www.w3tweaks.com/wp-content/uploads/2020/05/Simple-Tabs-1024x583.png)
Author: John D. Jameson | Created on April 26, 2014 | Updated on April 28, 2014
Pure CSS Tab
Just CSS, no JS!
![18 Free CSS Tabs for Designing Websites 7 Pure CSS Tabs](https://www.w3tweaks.com/wp-content/uploads/2020/05/Pure-CSS-Tabs-1024x583.png)
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.
![18 Free CSS Tabs for Designing Websites 8 Quick and Simple Tabs](https://www.w3tweaks.com/wp-content/uploads/2020/05/Quick-and-Simple-Tabs-1024x583.png)
Author: Todd Gallimore | Created on September 27, 2013 | Updated on October 29, 2013
SVG Tabs
![18 Free CSS Tabs for Designing Websites 9 SVG Tabs](https://www.w3tweaks.com/wp-content/uploads/2020/05/SVG-Tabs-1024x583.png)
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.
![18 Free CSS Tabs for Designing Websites 10 Minimal Tabs using jQuery UI](https://www.w3tweaks.com/wp-content/uploads/2020/05/Minimal-Sexy-Tabs-using-jQuery-UI-1024x583.png)
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.
![18 Free CSS Tabs for Designing Websites 11 Transformer Tabs](https://www.w3tweaks.com/wp-content/uploads/2020/05/Transformer-Tabs-1024x583.png)
Author: Chris Coyier | Created on November 3, 2013 | Updated on March 13, 2020
Simple Tab using CSS
![18 Free CSS Tabs for Designing Websites 12 PureCSS Tabs](https://www.w3tweaks.com/wp-content/uploads/2020/05/PureCSS-Tabs-1024x583.png)
Author: Renato Ribeiro | Created on October 27, 2014 | Updated on March 28, 2015
Responsive Horizontal Bootstrap Scroll Nav
![18 Free CSS Tabs for Designing Websites 13 Responsive Horizontal Bootstrap Scroll Nav](https://www.w3tweaks.com/wp-content/uploads/2020/05/Responsive-Horizontal-Bootstrap-Scroll-Nav-1024x583.png)
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.
![18 Free CSS Tabs for Designing Websites 14 Adaptive tabs](https://www.w3tweaks.com/wp-content/uploads/2020/05/adaptive-tabs.gif)
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.
![18 Free CSS Tabs for Designing Websites 15 Fantabulous Tabs Simple Javascript animated tabs](https://www.w3tweaks.com/wp-content/uploads/2020/05/Fantabulous-Tabs-Simple-Javascript-animated-tabs.gif)
Author: Stephen Nelson | Created on June 9, 2015 | Updated on June 9, 2015
jQuery tabs
![18 Free CSS Tabs for Designing Websites 16 jQuery tabs](https://www.w3tweaks.com/wp-content/uploads/2020/05/jQuery-tabs.gif)
Author: ihzh | Created on June 29, 2015 | Updated on January 18, 2016
Tabs Navigation UI
![18 Free CSS Tabs for Designing Websites 17 Tabs Navigation UI](https://www.w3tweaks.com/wp-content/uploads/2020/05/Tabs-Navigation-UI.gif)
Author: Natalia Davydova | Created on August 3, 2019 | Updated on August 3, 2019
Leave a Reply