<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>

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.