HTML
<div class="tabs">
<!-- Radio button and lable for #tab-content1 -->
<input type="radio" name="tabs" id="tab1" checked >
<label for="tab1">
<i class="fa fa-html5"></i><span>HTML5</span>
</label>
<!-- Radio button and lable for #tab-content2 -->
<input type="radio" name="tabs" id="tab2">
<label for="tab2">
<i class="fa fa-css3"></i><span>CSS3</span>
</label>
<!-- Radio button and lable for #tab-content3 -->
<input type="radio" name="tabs" id="tab3">
<label for="tab3">
<i class="fa fa-code"></i><span>jQuery</span>
</label>
<div id="tab-content1" class="tab-content">
<h3>Tab One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac massa non metus vulputate rutrum cursus ac orci. Aenean dapibus metus eu varius varius. Nunc eget enim id sem sodales aliquet. Nam scelerisque velit quis vulputate molestie. Vestibulum faucibus dui eget lacus mollis, vitae egestas mauris tristique.</p>
</div> <!-- #tab-content1 -->
<div id="tab-content2" class="tab-content">
<h3>Tab Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac massa non metus vulputate rutrum cursus ac orci. Aenean dapibus metus eu varius varius. Nunc eget enim id sem sodales aliquet. Nam scelerisque velit quis vulputate molestie. Vestibulum faucibus dui eget lacus mollis, vitae egestas mauris tristique.</p>
</div> <!-- #tab-content2 -->
<div id="tab-content3" class="tab-content">
<h3>Tab Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac massa non metus vulputate rutrum cursus ac orci. Aenean dapibus metus eu varius varius. Nunc eget enim id sem sodales aliquet. Nam scelerisque velit quis vulputate molestie. Vestibulum faucibus dui eget lacus mollis, vitae egestas mauris tristique.</p>
</div> <!-- #tab-content3 -->
</div>
CSS
.tabs {
max-width: 90%;
float: none;
list-style: none;
padding: 0;
margin: 75px auto;
border-bottom: 4px solid #ccc;
}
.tabs:after {
content: '';
display: table;
clear: both;
}
.tabs input[type=radio] {
display:none;
}
.tabs label {
display: block;
float: left;
width: 33.3333%;
color: #ccc;
font-size: 30px;
font-weight: normal;
text-decoration: none;
text-align: center;
line-height: 2;
cursor: pointer;
box-shadow: inset 0 4px #ccc;
border-bottom: 4px solid #ccc;
-webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */
transition: all 0.5s;
}
.tabs label span {
display: none;
}
.tabs label i {
padding: 5px;
margin-right: 0;
}
.tabs label:hover {
color: #3498db;
box-shadow: inset 0 4px #3498db;
border-bottom: 4px solid #3498db;
}
.tab-content {
display: none;
width: 100%;
float: left;
padding: 15px;
box-sizing: border-box;
background-color:#ffffff;
}
.tab-content * {
-webkit-animation: scale 0.7s ease-in-out;
-moz-animation: scale 0.7s ease-in-out;
animation: scale 0.7s ease-in-out;
}
@keyframes scale {
0% {
transform: scale(0.9);
opacity: 0;
}
50% {
transform: scale(1.01);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.tabs [id^="tab"]:checked + label {
background: #FFF;
box-shadow: inset 0 4px #3498db;
border-bottom: 4px solid #3498db;
color: #3498db;
}
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3 {
display: block;
}
@media (min-width: 768px) {
.tabs i {
padding: 5px;
margin-right: 10px;
}
.tabs label span {
display: inline-block;
}
.tabs {
max-width: 750px;
margin: 50px auto;
}
}
1 Response