Home Web Design CSS Pure CSS Tabs With Responsive Design | Example and Source Code

Pure CSS Tabs With Responsive Design | Example and Source Code

April 23, 2019

18813

How we can create Pure CSS Tabs With Responsive Design? Get an example with source code.

Basically, tabs are mostly used in single page website or display multiple information in less space. You can say tabs are another type of or alternative of an accordion. In other words, tabs are just horizontal mode of the accordion, but tabs come with small heading text comparing to an accordion.

Mostly all tabs are built-in JavaScript or Jquery, But today I am sharing pure CSS tabs with responsive design. This program is completely without JavaScript, No JS or no other JS framework used. This is in pure CSS also with very fewer lines of codes. That makes it a perfect example of pure CSS tabs program.

So, Today I am sharing a responsive tab program in pure CSS and HTML. You can use it on your website to give a fresh and simple look. Why you will increase the height of web page by put so many texts on every single category. Just use this tabs program, save your space on web page. Always a clean look creates good UI and UX.

This program is completely static, so you can switch tab quickly. There are not any lazy loading issue. If you want to see the tabs program in pure CSS which I am talking about, there is the preview.

Preview or Example of Responsive Tab

Let’s see a preview of how this program looks like, See in this video.

https://webdevtrick.com/wp-content/uploads/pure-css-tabs.mp4?_=1

Now you can see this program visually, how is it? If you like this simple program then go for the source code given below.

Pure CSS Tabs Programs Source Code

As always. Before sharing source code I want to say something about this program. You already know that this is in pure CSS. I just used <input type="radio"> for the program. And used input[type="radio"]:checked ( about radio checked ) for turn off and on tabs. Basically when we click on a tab input become checked, then the display become block, otherwise none. This is the complete secret of this CSS tab program.

You just have to create 2 files for creating this program. One for HTML, & one for CSS. Just follow the steps:

index.html

Create an HTML file named ‘index.html‘ & put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>Responsive Pure CSS tabs | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">

  
</head>

<body>

  <div class="tabs">
  <input type="radio" name="tabs" id="tabone" checked="checked">
  <label for="tabone">First Tab</label>
  <div class="tab">
    <h1>First Tab Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  
  <input type="radio" name="tabs" id="tabtwo">
  <label for="tabtwo">Second Tab</label>
  <div class="tab">
    <h1>Second Tab Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  
  <input type="radio" name="tabs" id="tabthree">
  <label for="tabthree">Third Tab</label>
  <div class="tab">
    <h1>Third Tab Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Responsive Pure CSS tabs | Webdevtrick.com</title>

</head>

<body>

<label for="tabone">First Tab</label>

<h1>First Tab Content</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<label for="tabtwo">Second Tab</label>

<h1>Second Tab Content</h1>

</div>

<label for="tabthree">Third Tab</label>

<h1>Third Tab Content</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ for giving life to this program. Put these codes in the file.

/** code by webdevtrick ( https://webdevtrick.com ) */
.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tabs label {
  order: 1;
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background:  #3CC0F8;
  font-weight: bold;
  transition: background ease 0.2s;
}

.tabs .tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
}

.tabs input[type="radio"] {
  display: none;
}

.tabs input[type="radio"]:checked + label {
  background: #fff;
}

.tabs input[type="radio"]:checked + label + .tab {
  display: block;
}

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }

  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

body {
  background: #333;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 10vh;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  max-width: 60rem;
  margin: 0 auto;
  font-size: 112%;
}

/** code by webdevtrick ( https://webdevtrick.com ) */

.tabs {

display: flex;

flex-wrap: wrap;

}

.tabs label {

order: 1;

display: block;

padding: 1rem 2rem;

margin-right: 0.2rem;

cursor: pointer;

background: #3CC0F8;

font-weight: bold;

transition: background ease 0.2s;

}

.tabs .tab {

order: 99;

flex-grow: 1;

width: 100%;

display: none;

padding: 1rem;

background: #fff;

}

.tabs input[type="radio"] {

display: none;

}

.tabs input[type="radio"]:checked + label {

background: #fff;

}

.tabs input[type="radio"]:checked + label + .tab {

display: block;

}

@media (max-width: 45em) {

.tabs .tab,

.tabs label {

order: initial;

}

.tabs label {

width: 100%;

margin-right: 0;

margin-top: 0.2rem;

}

body {

background: #333;

min-height: 100vh;

box-sizing: border-box;

padding-top: 10vh;

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

font-weight: 300;

line-height: 1.5;

max-width: 60rem;

margin: 0 auto;

font-size: 112%;

}

That’s It. Now you have successfully created a Pure CSS tabs program with responsive design. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

7 COMMENTS

Abdul Somad May 3, 2019 At 3:37 am

Niche tricks, very good

Reply
- shaan May 3, 2019 At 3:43 am
  
  Thank you very much, Stay Connected.
  
  Reply
Abdul Somad May 3, 2019 At 3:38 am

Nice tricks

Reply
GeneH September 25, 2019 At 1:39 pm

Is there a way to pure CSS tabs using inline CSS? I’m trying to populate popups within a web map with pure CSS tabs and do so with inline CSS because the 3rd party web map application strips away javascript and doesn’t allow for access to the header for styling without inline CSS.

Reply
shankar October 21, 2019 At 7:01 am

awsome bro….so simple and easy….thanks a lot. would like to know more about css

Reply
walterson August 22, 2020 At 9:00 pm

thanks, very nice!

Reply
SS June 18, 2021 At 8:41 pm

How can I center align the tabs and content? It covers the whole width of the screen and I don’t want it that way. Thanks!

Reply