Step 1: index.html
This file contains the structure of the pricing section, including navigation tabs for "Yearly" and "Monthly" pricing options.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>modern price section</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- add style -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="text-center">
<div class="nav price-tabs" role="tablist">
<a class="nav-link active" href="#yearly" role="tab" data-toggle="tab">Yearly</a>
<a class="nav-link" href="#monthly" role="tab" data-toggle="tab">Monthly</a>
</div>
</div>
<div class="tab-content wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
<!-- Yearly Pricing Tab -->
<div role="tabpanel" class="tab-pane fade show active" id="yearly">
<div class="row justify-content-center">
<!-- Personal Plan -->
<div class="col-md-6 col-lg-4 mb-30">
<div class="price-item text-center">
<div class="price-top">
<h4>Personal</h4>
<h2 class="mb-0"><sup>$</sup>99</h2>
<span class="text-capitalize">per year</span>
</div>
<div class="price-content">
<ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Eget erovtiu faucid</span></li>
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Cras justo odio</span></li>
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Morbi leo risus</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Porta consectetur ac</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Vestibulum at eros</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Adipisci atque beatae</span></li>
</ul>
<a href="#" class="btn btn-custom">Buy now</a>
</div>
</div>
</div>
<!-- Business Plan -->
<div class="col-md-6 col-lg-4 mb-30">
<div class="price-item text-center popular">
<div class="price-top">
<h4>Business</h4>
<h2 class="mb-0"><sup>$</sup>299</h2>
<span class="text-capitalize">per year</span>
</div>
<div class="price-content">
<ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Eget erovtiu faucid</span></li>
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Cras justo odio</span></li>
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Morbi leo risus</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Porta consectetur ac</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Vestibulum at eros</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Adipisci atque beatae</span></li>
</ul>
<a href="#" class="btn btn-custom btn-light">Buy now</a>
</div>
</div>
</div>
<!-- Enterprise Plan -->
<div class="col-md-6 col-lg-4 mb-30">
<div class="price-item text-center">
<div class="price-top">
<h4>Enterprise</h4>
<h2 class="mb-0"><sup>$</sup>399</h2>
<span class="text-capitalize">per year</span>
</div>
<div class="price-content">
<ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Eget erovtiu faucid</span></li>
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Cras justo odio</span></li>
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Morbi leo risus</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Porta consectetur ac</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Vestibulum at eros</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Adipisci atque beatae</span></li>
</ul>
<a href="#" class="btn btn-custom">Buy now</a>
</div>
</div>
</div>
</div>
</div>
<!-- Monthly Pricing Tab -->
<div role="tabpanel" class="tab-pane fade" id="monthly">
<div class="row justify-content-center">
<!-- Personal Plan (Monthly) -->
<div class="col-md-6 col-lg-4 mb-30">
<div class="price-item text-center">
<div class="price-top">
<h4>Personal</h4>
<h2 class="mb-0"><sup>$</sup>29</h2>
<span class="text-capitalize">per month</span>
</div>
<div class="price-content">
<ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Eget erovtiu faucid</span></li>
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Cras justo odio</span></li>
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Morbi leo risus</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Porta consectetur ac</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Vestibulum at eros</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Adipisci atque beatae</span></li>
</ul>
<a href="#" class="btn btn-custom">Buy now</a>
</div>
</div>
</div>
<!-- Business Plan (Monthly) -->
<div class="col-md-6 col-lg-4 mb-30">
<div class="price-item text-center popular">
<div class="price-top">
<h4>Business</h4>
<h2 class="mb-0"><sup>$</sup>59</h2>
<span class="text-capitalize">per month</span>
</div>
<div class="price-content">
<ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Eget erovtiu faucid</span></li>
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Cras justo odio</span></li>
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Morbi leo risus</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Porta consectetur ac</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Vestibulum at eros</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Adipisci atque beatae</span></li>
</ul>
<a href="#" class="btn btn-custom btn-light">Buy now</a>
</div>
</div>
</div>
<!-- Enterprise Plan (Monthly) -->
<div class="col-md-6 col-lg-4 mb-30">
<div class="price-item text-center">
<div class="price-top">
<h4>Enterprise</h4>
<h2 class="mb-0"><sup>$</sup>99</h2>
<span class="text-capitalize">per month</span>
</div>
<div class="price-content">
<ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Eget erovtiu faucid</span></li>
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Cras justo odio</span></li>
<li><i class="zmdi zmdi-check mr-2"></i><span class="c-black">Morbi leo risus</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Porta consectetur ac</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Vestibulum at eros</span></li>
<li><i class="zmdi zmdi-close mr-2"></i><span>Adipisci atque beatae</span></li>
</ul>
<a href="#" class="btn btn-custom">Buy now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- library js -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
Step 2: style.css
This CSS file styles the pricing section, including the price tabs, price items, and different states for the active tab and popular items.
body {
background: #eee;
margin-top: 20px;
}
/* ===== PRICING PAGE ===== */
.price-tabs {
background-color: #fff;
-webkit-box-shadow: 0 5px 20px 0 rgba(39, 39, 39, 0.1);
box-shadow: 0 5px 20px 0 rgba(39, 39, 39, 0.1);
display: inline-block;
padding: 7px;
border-radius: 40px;
border: 1px solid #00b5ec;
margin-bottom: 45px;
}
@media (min-width: 768px) {
.price-tabs {
margin-bottom: 60px;
}
}
.price-tabs .nav-link {
color: #00b5ec;
font-weight: 500;
font-family: "Montserrat", sans-serif;
font-size: 16px;
padding: 12px 35px;
display: inline-block;
text-transform: capitalize;
border-radius: 40px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media (min-width: 768px) {
.price-tabs .nav-link {
padding: 12px 40px;
}
}
.price-tabs .nav-link.active {
background-color: #00b5ec;
color: #fff;
}
.price-item {
background-color: #fff;
-webkit-box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
border-radius: 10px;
}
@media (min-width: 768px) {
.price-item {
margin: 0 20px;
padding-top: 20px;
}
}
.price-item .price-top {
-webkit-box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
padding: 50px 0 25px;
background-color: #00b5ec;
border-radius: 10px;
position: relative;
z-index: 0;
margin-bottom: 33px;
}
@media (min-width: 768px) {
.price-item .price-top {
margin: 0 -20px;
border-radius: 20px 20px 0 0;
}
}
.price-item h2 {
font-size: 42px;
font-weight: 700;
color: #fff;
}
.price-item .price-content ul {
list-style: none;
margin: 0;
padding: 0;
}
.price-item .price-content ul li {
color: #6b6b6b;
font-size: 15px;
line-height: 22px;
font-weight: 500;
padding: 5px 0;
}
.price-item .price-content ul li i {
font-size: 16px;
color: #6db87b;
}
.price-item .price-content ul li span {
color: #888;
font-weight: 400;
}
.price-item .price-content ul li i.zmdi-close {
color: #ff4c4c;
}
.price-item .price-content a {
background-color: #00b5ec;
padding: 15px 0;
width: 100%;
font-size: 16px;
color: #fff;
text-transform: uppercase;
font-weight: 600;
display: inline-block;
border-radius: 40px;
text-align: center;
margin-top: 15px;
transition: all 0.3s ease;
}
.price-item .price-content a:hover {
background-color: #006b8f;
}
.price-item.popular {
border: 3px solid #00b5ec;
background: rgba(0, 181, 236, 0.1);
}
.price-item.popular .price-top {
background: #fff;
border-bottom: 5px solid #00b5ec;
}
.price-item.popular h2 {
color: #00b5ec;
}
Step 3: Dependencies
You have to ensure that you have included the correct dependencies, such as Bootstrap and jQuery, for the tabs and other functionality to work.
