<div class="single-page pricing-page py-5">
<div class="fui-container">
<div class="row">
<!-- SINGLE PRICE -->
<div class="col-md-4 col-sm-6 col-12 mb-2">
<div class="fui-card">
<div class="fui-card-header text-white text-center py-2 bg-dark">
<h2 class="fui-card-title mb-1">$ 0</h2>
<h4 class="fui-card-title mb-1">FREE TRAIL</h4>
</div>
<div class="fui-card-body text-center py-4" style="height: 250px">
<p class="weight-500">Option 1</p>
<p class="weight-500">Option 2</p>
<p class="weight-500">Option 3</p>
<p class="weight-500">Option 4</p>
<p class="weight-500">Option 5</p>
</div>
<div class="fui-card-footer">
<a href="" class="fui-btn fui-btn-dark w-100 py-2">SELECT</a>
</div>
</div>
</div>
<!-- SINGLE PRICE -->
<div class="col-md-4 col-sm-6 col-12 mb-2">
<div class="fui-card">
<div class="fui-card-header text-white text-center py-2 bg-primary">
<h2 class="fui-card-title mb-1">$ 25</h2>
<h4 class="fui-card-title mb-1">BUSINESS PARTNER</h4>
</div>
<div class="fui-card-body text-center py-4" style="height: 250px">
<p class="weight-500">Option 1</p>
<p class="weight-500">Option 2</p>
<p class="weight-500">Option 3</p>
<p class="weight-500">Option 4</p>
<p class="weight-500">Option 5</p>
</div>
<div class="fui-card-footer">
<a href="" class="fui-btn fui-btn-primary w-100 py-2">SELECT</a>
</div>
</div>
</div>
<!-- SINGLE PRICE -->
<div class="col-md-4 col-sm-6 col-12 mb-2">
<div class="fui-card">
<div class="fui-card-header text-white text-center py-2 bg-dark">
<h2 class="fui-card-title mb-1">$ 45</h2>
<h4 class="fui-card-title mb-1">PRO PARTNER</h4>
</div>
<div class="fui-card-body text-center py-4" style="height: 250px">
<p class="weight-500">Option 1</p>
<p class="weight-500">Option 2</p>
<p class="weight-500">Option 3</p>
<p class="weight-500">Option 4</p>
<p class="weight-500">Option 5</p>
</div>
<div class="fui-card-footer">
<a href="" class="fui-btn fui-btn-dark w-100 py-2">SELECT</a>
</div>
</div>
</div>
</div>
</div>
</div>
.bg-dark {
background: #555 !important;
}
.bg-primary {
background: #008cff !important;
}
Insert before the closing </head> tag
<!-- Icon Famous -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/icon-famous/1.0.0-beta.2/iconfamous.css">
<!-- Famous UI -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.css">
Insert before the closing </body> tag
<!-- jQuery -->
<script src="https://cdn.boomcdn.com/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Famous UI -->
<script src="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.js"></script>