<div class="container bg-light py-5">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="card bg-warning border-0 rounded-0 shadow">
<div class="card-header text-center text-white border-0">
<h2><strong>BASIC</strong></h2>
<p>LOREM IPSUM DOLOR SIT</p>
<i class="fa fa-star"></i>
</div>
<div class="card-body bg-white">
<ul class="list-unstyled">
<li class="mb-4"><i class="fa fa-lg fa-check-circle text-warning mr-2"></i> <strong>Unlimited</strong> Email Addresses</li>
<li class="mb-4"><i class="fa fa-lg fa-check-circle text-warning mr-2"></i> <strong>50 GB</strong> Disk Space</li>
<li class="mb-4"><i class="fa fa-lg fa-check-circle text-warning mr-2"></i> <strong>Unlimited</strong> MySQL Database</li>
<li class="mb-4"><i class="fa fa-lg fa-times-circle text-secondary mr-2"></i> 24X7 Support</li>
<li class="mb-4"><i class="fa fa-lg fa-times-circle text-secondary mr-2"></i> Email Support</li>
</ul>
<p class="text-center font-weight-bolder text-dark h1 display-4 mb-0">$3</p>
<p class="small text-center font-weight-bolder text-secondary">per month</p>
<a href="#" class="btn btn-block bg-warning text-white">VIEW MORE</a></div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card bg-success border-0 rounded-0 shadow">
<div class="card-header text-center text-white border-0">
<h2><strong>PREMIUM</strong></h2>
<p>LOREM IPSUM DOLOR SIT</p>
<i class="fa fa-star text-warning mr-2"></i>
<i class="fa fa-star text-warning"></i></div>
<div class="card-body bg-white">
<ul class="list-unstyled">
<li class="mb-4"><i class="fa fa-lg fa-check-circle text-warning mr-2"></i> <strong>Unlimited</strong> Email Addresses</li>
<li class="mb-4"><i class="fa fa-lg fa-check-circle text-warning mr-2"></i> <strong>80 GB</strong> Disk Space</li>
<li class="mb-4"><i class="fa fa-lg fa-check-circle text-warning mr-2"></i> <strong>Unlimited</strong> MySQL Database</li>
<li class="mb-4"><i class="fa fa-lg fa-check-circle text-warning mr-2"></i> 24X7 Support</li>
<li class="mb-4"><i class="fa fa-lg fa-times-circle text-secondary mr-2"></i> Email Support</li>
</ul>
<p class="text-center font-weight-bolder text-dark h1 display-4 mb-0">$8</p>
<p class="small text-center font-weight-bolder text-secondary">per month</p>
<a href="#" class="btn btn-block bg-success text-white">VIEW MORE</a></div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="card bg-info border-0 rounded-0 shadow">
<div class="card-header text-center text-white border-0">
<h2><strong>BUSINESS</strong></h2>
<p>LOREM IPSUM DOLOR SIT</p>
<i class="fa fa-star text-warning mr-2"></i>
<i class="fa fa-star text-warning mr-2"></i>
<i class="fa fa-star text-warning"></i>
</div>
<div class="card-body bg-white">
<ul class="list-unstyled">
<li class="mb-4"><i class="fa fa-lg fa-check-circle text-warning mr-2"></i> <strong>Unlimited</strong> Email Addresses</li>
<li class="mb-4"><i class="fa fa-lg fa-check-circle text-warning mr-2"></i> <strong>120 GB</strong> Disk Space</li>
<li class="mb-4"><i class="fa fa-lg fa-check-circle text-warning mr-2"></i> <strong>Unlimited</strong> MySQL Database</li>
<li class="mb-4"><i class="fa fa-lg fa-check-circle text-warning mr-2"></i> 24X7 Support</li>
<li class="mb-4"><i class="fa fa-lg fa-check-circle text-warning mr-2"></i> Email Support</li>
</ul>
<p class="text-center font-weight-bolder text-dark h1 display-4 mb-0">$12</p>
<p class="small text-center font-weight-bolder text-secondary">per month</p>
<a href="#" class="btn btn-block bg-success text-white">VIEW MORE</a></div>
</div>
</div>
</div>
</div>
This Pen doesn't use any external JavaScript resources.