Create tabs using using css and html

Total Views : 250
Zoom In Zoom Out Read Later Print

6 different styles for creating tabs using html and css.

tabs.css

@charset "UTF-8";

/* Tabs style 1 */
.pd-tabs-style1 {
padding: 20px;
background: #ffffff;
box-shadow: 0 3px 10px rgba(51, 122, 183, 0.1);
}

.pd-tabs-style1 .pd-tab-title {
margin: 0 0 15px 0;
font-size: 20px;
line-height: normal;
}

.pd-tabs-style1 .pd-tab-desc {
font-size: 13px;
}

.pd-tabs-style1 .tab-content {
margin-top: 20px;
padding-left: 5px;
}

.pd-tabs-style1 .nav-tabs {
border-bottom: 0;
}

.pd-tabs-style1 .nav-tabs li a {
margin-bottom: 4px;
border: 0 !important;
border-radius: 0;
line-height: normal;
font-size: 13px;
color: #777;
font-weight: 600;
}

.pd-tabs-style1 .nav-tabs li a:hover,
.pd-tabs-style1 .nav-tabs li.active a {
background: #f5f5f5;
}

/* Tabs style 2 */
.pd-tabs-style2 {
padding: 20px;
background: #ffffff;
border: 2px solid rgba(68, 68, 68, 0.1);
}

.pd-tabs-style2 .pd-tab-title {
margin: 0 0 15px 0;
font-size: 20px;
line-height: normal;
}

.pd-tabs-style2 .pd-tab-desc {
font-size: 13px;
}

.pd-tabs-style2 .tab-content {
margin-top: 20px;
padding-left: 5px;
}

.pd-tabs-style2 .nav-tabs {
border-bottom: 0;
}

.pd-tabs-style2 .nav-tabs li a {
border: 0 !important;
border-radius: 0;
line-height: normal;
font-size: 13px;
color: #777;
border-radius: 20px;
font-weight: 600;
padding: 8px 20px;
margin-right: 4px;
margin-bottom: 4px;
}

.pd-tabs-style2 .nav-tabs li a:hover,
.pd-tabs-style2 .nav-tabs li.active a {
background: #000000;
color: #fff;
}

/* Tabs style 3 */
.pd-tabs-style3 .pd-tab-title {
margin: 0 0 15px 0;
font-size: 20px;
line-height: normal;
}

.pd-tabs-style3 .pd-tab-desc {
font-size: 13px;
}

.pd-tabs-style3 .tab-content {
margin-top: 35px;
}

.pd-tabs-style3 .nav-tabs {
border-bottom: 0;
}

.pd-tabs-style3 .nav-tabs li a {
position: relative;
display: inline-block;
border: 0 !important;
border-radius: 0;
line-height: normal;
font-size: 16px;
color: #777;
border-radius: 20px;
padding: 0 0 10px 0;
margin-right: 15px;
margin-bottom: 4px;
background: transparent !important;
}

.pd-tabs-style3 .nav-tabs li a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background: #444;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}

.pd-tabs-style3 .nav-tabs li a:hover,
.pd-tabs-style3 .nav-tabs li.active a {
color: #222;
}

.pd-tabs-style3 .nav-tabs li a:hover:after {
width: 30%;
}

.pd-tabs-style3 .nav-tabs li.active a:after {
width: 100%;
}

/* Tabs style 4 */
.pd-tabs-style4 {
padding: 20px;
background: #444;
}

.pd-tabs-style4 .pd-tab-title {
margin: 0 0 15px 0;
font-size: 20px;
line-height: normal;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.pd-tabs-style4 .pd-tab-desc {
font-size: 13px;
color: #bbb;
}

.pd-tabs-style4 .tab-content {
margin-top: 20px;
padding-left: 5px;
}

.pd-tabs-style4 .nav-tabs {
border-bottom: 0;
}

.pd-tabs-style4 .nav-tabs li a {
border: 0 !important;
border-radius: 0;
line-height: normal;
font-size: 13px;
color: #bbb;
border-radius: 4px;
padding: 8px 20px;
margin-right: 4px;
margin-bottom: 4px;
}

.pd-tabs-style4 .nav-tabs li a:hover,
.pd-tabs-style4 .nav-tabs li.active a {
background: rgba(255, 255, 255, 0.24);
color: #fff;
}

/* Tabs style 5 */
.pd-tabs-style5 {
padding: 30px;
background: #ffffff;
box-shadow: 0 3px 10px rgba(68, 68, 68, 0.1);
}

.pd-tabs-style5 .pd-tab-title {
margin: 0 0 15px 0;
font-size: 20px;
line-height: normal;
}

.pd-tabs-style5 .pd-tab-desc {
font-size: 13px;
}

.pd-tabs-style5 .tab-content {
margin-top: 35px;
}

.pd-tabs-style5 .nav-tabs {
border-bottom: 0;
}

.pd-tabs-style5 .nav-tabs li a {
position: relative;
display: inline-block;
border: 0 !important;
border-radius: 0;
line-height: normal;
font-size: 16px;
color: #777;
border-radius: 20px;
padding: 8px 0 8px 0;
margin-right: 15px;
margin-bottom: 4px;
background: transparent !important;
}

.pd-tabs-style5 .nav-tabs li a:before,
.pd-tabs-style5 .nav-tabs li a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background: #444;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}

.pd-tabs-style5 .nav-tabs li a:after {
top: 0;
right: 0;
left: auto;
}

.pd-tabs-style5 .nav-tabs li a:hover,
.pd-tabs-style5 .nav-tabs li.active a {
color: #222;
}

.pd-tabs-style5 .nav-tabs li a:hover:before,
.pd-tabs-style5 .nav-tabs li a:hover:after {
width: 50%;
}

.pd-tabs-style5 .nav-tabs li.active a:before,
.pd-tabs-style5 .nav-tabs li.active a:after {
width: 100%;
}

/* Tabs style 6 */
.pd-tabs-style6 {
padding: 20px;
background-color: #ffffff;
box-shadow: 0 3px 10px rgba(51, 122, 183, 0.15);
}

.pd-tabs-style6 .pd-tab-title {
margin: 0 0 15px 0;
font-size: 20px;
line-height: normal;
}

.pd-tabs-style6 .pd-tab-desc {
font-size: 13px;
}

.pd-tabs-style6 .tab-content {
margin-top: 20px;
padding-left: 5px;
}

.pd-tabs-style6 .nav-tabs {
border-bottom: 0;
}

.pd-tabs-style6 .nav-tabs li a {
padding: 8px 15px;
margin-bottom: 4px;
border: 0 !important;
border-radius: 0;
line-height: normal;
font-size: 13px;
color: #777;
font-weight: 600;
}

.pd-tabs-style6 .nav-tabs li a:hover,
.pd-tabs-style6 .nav-tabs li.active a {
background-color: #f5f5f5;
}

.pd-tabs-style6 .nav-tabs li.active a:after,
.pd-tabs-style6 .nav-tabs li a:hover:after {
content: '';
position: absolute;
border: 7px solid transparent;
border-top-color: #f5f5f5;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
}

tabs.html

<!DOCTYPE html>
<html lang="zxx">
<head>
<!-- meta character set -->
<meta charset="utf-8">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Fontawesome Icon font -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- bootstrap.min -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- demo stylesheet -->
<link rel="stylesheet" href="css/demo.css"> <!-- This file only use demostration -->
<!-- tabs stylesheet -->
<link rel="stylesheet" href="css/tabs.css">
<!-- jQuery library -->
<script src="js/jquery.min.js"></script>
<!-- bootstrap.min.js -->
<script src="js/bootstrap.min.js"></script>
</head>
<body id="body">
<!-- Main Start -->
<main class="site-content">
<!-- Tabs Style 1 Start -->
<section class="sec-spacer">
<div class="container container-center">
<div class="row">
<div class="col-md-10">
<div class="pd-tabs-style1">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">About Us</a></li>
<li><a data-toggle="tab" href="#tab2">Our Mission</a></li>
<li><a data-toggle="tab" href="#tab3">Our Vission</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<div class="row">
<div class="col-md-4">
<img src="img/p5.jpg">
</div>
<div class="col-md-8">
<h3 class="pd-tab-title">About Us</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
</div>
</div>
<div id="tab2" class="tab-pane fade">
<div class="row">
<div class="col-md-8 text-right">
<h3 class="pd-tab-title">Our Mission</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
<div class="col-md-4">
<img src="img/p6.jpg">
</div>
</div>
</div>
<div id="tab3" class="tab-pane fade">
<div class="row">
<div class="col-md-4">
<img src="img/p7.jpg">
</div>
<div class="col-md-8">
<h3 class="pd-tab-title">Our Vission</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Tabs Style1 End -->
<!-- Tabs Style2 Start -->
<section class="sec-spacer sec-color">
<div class="container container-center">
<div class="row">
<div class="col-md-10">
<div class="pd-tabs-style2">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab4">About Us</a></li>
<li><a data-toggle="tab" href="#tab5">Our Mission</a></li>
<li><a data-toggle="tab" href="#tab6">Our Vission</a></li>
</ul>
<div class="tab-content">
<div id="tab4" class="tab-pane fade in active">
<div class="row">
<div class="col-md-4">
<img src="img/p1.jpg">
</div>
<div class="col-md-8">
<h3 class="pd-tab-title">About Us</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
</div>
</div>
<div id="tab5" class="tab-pane fade">
<div class="row">
<div class="col-md-8 text-right">
<h3 class="pd-tab-title">Our Mission</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
<div class="col-md-4">
<img src="img/p2.jpg">
</div>
</div>
</div>
<div id="tab6" class="tab-pane fade">
<div class="row">
<div class="col-md-4">
<img src="img/p3.jpg">
</div>
<div class="col-md-8">
<h3 class="pd-tab-title">Our Vission</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Tabs Style 2 End -->

<!-- Tabs Style 3 Start -->
<section class="sec-spacer">
<div class="container container-center">
<div class="row">
<div class="col-md-10">
<div class="pd-tabs-style3">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab7">About Us</a></li>
<li><a data-toggle="tab" href="#tab8">Our Mission</a></li>
<li><a data-toggle="tab" href="#tab9">Our Vission</a></li>
</ul>
<div class="tab-content">
<div id="tab7" class="tab-pane fade in active">
<div class="row">
<div class="col-md-4">
<img src="img/blog1.jpg">
</div>
<div class="col-md-8">
<h3 class="pd-tab-title">About Us</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
</div>
</div>
<div id="tab8" class="tab-pane fade">
<div class="row">
<div class="col-md-8 text-right">
<h3 class="pd-tab-title">Our Mission</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
<div class="col-md-4">
<img src="img/blog2.jpg">
</div>
</div>
</div>
<div id="tab9" class="tab-pane fade">
<div class="row">
<div class="col-md-4">
<img src="img/blog3.jpg">
</div>
<div class="col-md-8">
<h3 class="pd-tab-title">Our Vission</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Tabs Style 3 End -->
<!-- Tabs Style 4 Start -->
<section class="sec-spacer sec-color">
<div class="container container-center">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="pd-tabs-style4">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab10">About Us</a></li>
<li><a data-toggle="tab" href="#tab11">Our Mission</a></li>
<li><a data-toggle="tab" href="#tab12">Our Vission</a></li>
</ul>
<div class="tab-content">
<div id="tab10" class="tab-pane fade in active">
<div class="row">
<div class="col-md-4">
<img src="img/p1.jpg">
</div>
<div class="col-md-8">
<h3 class="pd-tab-title">About Us</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
</div>
</div>
<div id="tab11" class="tab-pane fade">
<div class="row">
<div class="col-md-8 text-right">
<h3 class="pd-tab-title">Our Mission</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
<div class="col-md-4">
<img src="img/p2.jpg">
</div>
</div>
</div>
<div id="tab12" class="tab-pane fade">
<div class="row">
<div class="col-md-4">
<img src="img/p3.jpg">
</div>
<div class="col-md-8">
<h3 class="pd-tab-title">Our Vission</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Tabs Style 4 End -->
<!-- Tabs Style 5 Start -->
<section class="sec-spacer">
<div class="container container-center">
<div class="row">
<div class="col-md-10">
<div class="pd-tabs-style5">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab13">About Us</a></li>
<li><a data-toggle="tab" href="#tab14">Our Mission</a></li>
<li><a data-toggle="tab" href="#tab15">Our Vission</a></li>
</ul>
<div class="tab-content">
<div id="tab13" class="tab-pane fade in active">
<div class="row">
<div class="col-md-4">
<img src="img/p1.jpg">
</div>
<div class="col-md-8">
<h3 class="pd-tab-title">About Us</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
</div>
</div>
<div id="tab14" class="tab-pane fade">
<div class="row">
<div class="col-md-8 text-right">
<h3 class="pd-tab-title">Our Mission</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
<div class="col-md-4">
<img src="img/p2.jpg">
</div>
</div>
</div>
<div id="tab15" class="tab-pane fade">
<div class="row">
<div class="col-md-4">
<img src="img/p3.jpg">
</div>
<div class="col-md-8">
<h3 class="pd-tab-title">Our Vission</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Tabs Style 5 End -->
<!-- Tabs Style 6 Start -->
<section class="sec-spacer sec-color">
<div class="container container-center">
<div class="row">
<div class="col-md-10">
<div class="pd-tabs-style6">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab16">About Us</a></li>
<li><a data-toggle="tab" href="#tab17">Our Mission</a></li>
<li><a data-toggle="tab" href="#tab18">Our Vission</a></li>
</ul>
<div class="tab-content">
<div id="tab16" class="tab-pane fade in active">
<div class="row">
<div class="col-md-4">
<img src="img/p1.jpg">
</div>
<div class="col-md-8">
<h3 class="pd-tab-title">About Us</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
</div>
</div>
<div id="tab17" class="tab-pane fade">
<div class="row">
<div class="col-md-8 text-right">
<h3 class="pd-tab-title">Our Mission</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
<div class="col-md-4">
<img src="img/p2.jpg">
</div>
</div>
</div>
<div id="tab18" class="tab-pane fade">
<div class="row">
<div class="col-md-4">
<img src="img/p3.jpg">
</div>
<div class="col-md-8">
<h3 class="pd-tab-title">Our Vission</h3>
<p class="pd-tab-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Tabs Style 6 End -->
</main>
<!-- Main End -->
</body>
</html>

See More

Latest Photos