24 CSS Tabs

September 12, 2017 | by Vladimir Stepura

Collection of HTML and CSS tabs with little JavaScript. Demo and download code (*zip).
Update of February 2017 collection. 6 new items.

Related Collections

  1. CSS Accordions
  2. CSS Breadcrumbs
  3. CSS Menu
  4. CSS Pagination

Demo Image: Pure CSS Tabs

Author

  • Mark Caron
  • 29.08.2017

Made with

  • HTML
  • CSS

About the code

Pure CSS Tabs

HTML and CSS tabs.

Demo Image: Featured Tabs

Author

  • Richard Gonyeau
  • 28.08.2017

Made with

  • HTML
  • CSS (bootstrap.css)
  • JavaScript (jquery.js, bootstrap.js)

About the code

Featured Tabs

Featured tabs with HTML, CSS and JS.

Demo Image: Step Effect For Tabs

Author

  • aklima iren
  • 10.07.2017

Made with

  • HTML
  • CSS (bootstrap.css)
  • JavaScript (bootstrap.js, jquery.js)

About the code

Step Effect For Tabs

Bootstrap tab with onclick step effect.

Demo Image: Scroll For Tabs

Author

  • Praveen Kumar Gorakala
  • 06.07.2017

Made with

  • HTML
  • CSS/SCSS (bootstrap.css)
  • JavaScript (angular.js, jquery.js, bootstrap.js)

About the code

Scroll For Tabs

HTML, CSS and JavaScript scroll for tabs.

Demo Image: Toggle Tabs

Author

  • Derek Palladino
  • 22.05.2017

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Toggle Tabs

Toggle switch style tab navigation. Currently only works with two tabs.

Demo Image: Accordion/Tabs With Animation

Author

  • Benjamin Koehler
  • 22.05.2017

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Accordion/Tabs With Animation

A simple tabs/accordions solution with jQuery, HTML and CSS.

Demo Image: Flying Cards Tabs
Demo Image: Flying Cards Tabs

Flying Cards Tabs

Flying cards tabs in HTML, CSS and JavaScript.
Made by Nora
February 6, 2017

Demo Image: Light Tabs
Demo Image: Light Tabs

Light Tabs

Light tabs with HTML, CSS and JavaScript.
Made by Alex Lime
February 1, 2017

Demo Image: CSS Tabs
Demo Image: CSS Tabs

CSS Tabs

HTML and CSS tabs.
Made by massimo
December 11, 2016

Demo Image: CSS3 Tabs
Demo Image: CSS3 Tabs

CSS3 Tabs

CSS3 Tabs by Sorax. Original: http://jsbin.com/uworip/59
Made by YozhEzhi
December 5, 2016

Demo Image: Pure CSS Tabs
Demo Image: Pure CSS Tabs

Pure CSS Tabs

Just CSS, no JS!
Made by Wallace Erick
November 26, 2016

Demo Image: Pure CSS Tabs With Indicator
Demo Image: Pure CSS Tabs With Indicator

Pure CSS Tabs With Indicator

HTML and CSS tabs with indicator.
Made by Alex
September 8, 2016

Demo Image: Tab UI
Demo Image: Tab UI

Tab UI

Tab UI with HTML, CSS and JavaScript.
Made by Hilo
July 8, 2016

Demo Image: CSS Tabs
Demo Image: CSS Tabs

CSS Tabs

It’s another experiment to make tabs without JavaScript.
Made by Flkt Crnpio
June 24, 2016

Demo Image: Tabs
Demo Image: Tabs

Tabs

HTML, CSS and JavaScript tabs.
Made by Nikita Jadhao
June 10, 2016

Demo Image: Pure CSS Color Tabs
Demo Image: Pure CSS Color Tabs

Pure CSS Color Tabs

HTML and CSS color tabs.
Made by ari
December 14, 2015

Demo Image: Adaptive tabs
Demo Image: Adaptive tabs

Adaptive tabs

Tabs that animate to the height of their content when switched.
Made by Lewi Hussey
June 28, 2015

Demo Image: Material Design Tabs
Demo Image: Material Design Tabs

Material Design Tabs

Material Design CSS only tabs.
Made by Ben Mildren
April 23, 2015

Demo Image: Material Expanding Overlay - Top-Aligned Tabs
Demo Image: Material Expanding Overlay - Top-Aligned Tabs

Material Expanding Overlay - Top-Aligned Tabs

HTML, CSS and JavaScript material expanding overlay - yop-aligned tabs.
Made by Tony Tomlinson
April 6, 2015

Demo Image: Transformer Tabs
Demo Image: Transformer Tabs

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.
Made by Chris Coyier
December 11, 2014

Demo Image: Responsive CSS Tabs
Demo Image: Responsive CSS Tabs

Responsive CSS Tabs

HTML and CSS responsive tabs.
Made by Oliver Knoblich
May 21, 2014

Demo Image: Simple Tabs
Demo Image: Simple Tabs

Simple Tabs

Simple HTML and CSS tabs.
Made by Srdjan Pajdic
February 9, 2014

Demo Image: Sliding Tab Box Things
Demo Image: Sliding Tab Box Things

Sliding Tab Box Things

Just a transition-y thing for hidden content areas.
Made by Derek Wheelden
January 28, 2014

Demo Image: CSS Tabs
Demo Image: CSS Tabs

CSS Tabs

Sipmle HTML and CSS tabs.
Made by White Wolf Wizard
August 31, 2013

FreeFrontend © 2016 - 2017

Back to top