Create Tabs Using HTML and Only CSS

 

Welcome to the Codewithrandom blog. In this blog, We learn how to create Tabs. We use Html and Css for Responsive Tabs.

I hope you enjoy our blog so let’s start with a basic html structure for the Responsive Tabs.

HTML Code For Tabs

<div class="oddbirds">
<input type="radio" name="toggle" id="mia-toggle" checked/>
<input type="radio" name="toggle" id="carl-toggle" />
<input type="radio" name="toggle" id="jonny-toggle" />
<div class="tabs">
<label for="mia-toggle">Mia</label>
<label for="carl-toggle">Carl</label>
<label for="jonny-toggle">Jonny</label>
</div>
<div class="content">
<div class="eric-content">
Responsive CSS Tabs in Sass,
with help from the float isolation method.
<ul>
<li>Container wraps all tabs dynamically</li>
<li>Container remains equal-height</li>
<li>No JS Height calculations</li>
<li>The entire thing is responsive</li>
</ul>
</div>
<div class="carl-content">
Carl is a coder, Pythonista, & Django developer.
</div>
<div class="jonny-content">
Jonny is a front-end developer & philosophy professor.
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
</div>
</div>

There is all the html code for the Tabs. Now, you can see output without Css. Then we write Css code for styling tabs and make responsive Tabs.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Output

CSS Code For Tabs

/* Tab Settings */
/* Tab Toggle Defaults */
.oddbirds [id*="mia"], .oddbirds [id*="carl"], .oddbirds [id*="jonny"] {
  position: absolute;
  visibility: hidden;
}

/* Tab Content Defaults */
.oddbirds [class*="mia"], .oddbirds [class*="carl"], .oddbirds [class*="jonny"] {
  -moz-transition: opacity 300ms;
  -o-transition: opacity 300ms;
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
  opacity: 0;
  /* Hide */
  float: left;
  /* Isolation */
  width: 100%;
  /* Isolation */
  margin-right: -100%;
  /* Isolation */
}

.oddbirds [id*="mia"]:checked ~ .content [class*="mia"], .oddbirds [id*="carl"]:checked ~ .content [class*="carl"], .oddbirds [id*="jonny"]:checked ~ .content [class*="jonny"] {
  opacity: 1;
  /* Show */
  position: relative;
  /* Bring to top */
  z-index: 10;
  /* Bring to top */
}

.oddbirds [id*="mia"]:checked ~ .tabs [for*="mia"], .oddbirds [id*="carl"]:checked ~ .tabs [for*="carl"], .oddbirds [id*="jonny"]:checked ~ .tabs [for*="jonny"] {
  background: none;
  border-bottom-color: transparent;
}

/* Tabs Mixin */
/* Creating Tabs */
/* Paint Job */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  line-height: 1.65em;
  padding: 1.5em;
  background: #437691;
}

.oddbirds {
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 0.5em;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 0.5em;
  width: 80%;
  max-width: 40em;
  margin: 0 auto;
  background: lightblue;
}

[for] {
  border-width: 0.0625em;
  border-style: solid;
  padding: 0.3125em;
  float: left;
  width: 33.33333%;
  text-align: center;
  background: #7ac;
}
[for] ~ [for] {
  border-left: 0;
}
[for]:last-child {
  float: right;
}

.content {
  overflow: hidden;
  *zoom: 1;
  border-width: 0.0625em;
  border-style: solid;
  padding: 0.6875em;
  clear: both;
  border-top: 0;
}
.content ul {
  list-style: disc;
  padding-left: 1.5em;
}

Now we have completed our Responsive Tabs. Here is our final updated output HTML + CSS.

Portfolio Website using HTML and CSS (Source Code)

Final Output Of Tabs