<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1>Responsive CSS Tabs</h1>
<div class="tab_container">
<input id="tab1" type="radio" name="tabs" class="inputnone" checked>
<label for="tab1" class="inputlabel"><i class="fa fa-code"></i><span>Code</span></label>
<input id="tab2" type="radio" name="tabs" class="inputnone">
<label for="tab2" class="inputlabel"><i class="fa fa-pencil-square-o"></i><span>About</span></label>
<input id="tab3" type="radio" name="tabs" class="inputnone">
<label for="tab3" class="inputlabel"><i class="fa fa-bar-chart-o"></i><span>Services</span></label>
<input id="tab4" type="radio" name="tabs" class="inputnone">
<label for="tab4" class="inputlabel"><i class="fa fa-folder-open-o"></i><span>Portfolio</span></label>
<input id="tab5" type="radio" name="tabs" class="inputnone">
<label for="tab5" class="inputlabel"><i class="fa fa-envelope-o"></i><span>Contact</span></label>
<section id="content1" class="tab-content inputnone">
<h3>Headline 1</h3>
<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>
</section>
<section id="content2" class="tab-content inputnone">
<h3>Headline 2</h3>
<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.</p>
</section>
<section id="content3" class="tab-content inputnone">
<h3>Headline 3</h3>
<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>
</section>
<section id="content4" class="tab-content inputnone">
<h3>Headline 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section id="content5" class="tab-content inputnone">
<h3>Headline 5</h3>
<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.</p>
</section>
</div>
/*
Fixed for form elements.
*/
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body {
font-family: sans-serif;
background: #f6f9fa;
}
h1 {
color: #ccc;
text-align: center;
}
a {
color: #ccc;
text-decoration: none;
outline: none;
}
/*Fun begins*/
.tab_container {
width: 90%;
margin: 0 auto;
position: relative;
}
.inputnone {
clear: both;
padding-top: 10px;
display: none;
}
.inputlabel {
font-weight: 700;
font-size: 18px;
display: block;
float: left;
width: 20%;
padding: 1.5em;
color: #757575;
cursor: pointer;
text-decoration: none;
text-align: center;
background: #f0f0f0;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: block;
padding: 20px;
background: #fff;
color: #999;
border-bottom: 2px solid #f0f0f0;
}
.tab_container .tab-content p,
.tab_container .tab-content h3 {
-webkit-animation: fadeInScale 0.7s ease-in-out;
-moz-animation: fadeInScale 0.7s ease-in-out;
animation: fadeInScale 0.7s ease-in-out;
}
.tab_container .tab-content h3 {
text-align: center;
}
.tab_container [id^="tab"]:checked + label {
background: #fff;
box-shadow: inset 0 3px #0CE;
}
.tab_container [id^="tab"]:checked + label .fa {
color: #0CE;
}
label .fa {
font-size: 1.3em;
margin: 0 0.4em 0 0;
}
/*Media query*/
@media only screen and (max-width: 930px) {
label span {
font-size: 14px;
}
label .fa {
font-size: 14px;
}
}
@media only screen and (max-width: 768px) {
label span {
display: none;
}
label .fa {
font-size: 16px;
}
.tab_container {
width: 98%;
}
}
/*Content Animation*/
@keyframes fadeInScale {
0% {
transform: scale(0.9);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
