JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="feature-list">
<div class="col-md-6 col-sm-6">
<div class="cat-item3 col-xs-12">
<div class="ftr-img col-xs-2">
<img src="assets/img/inner/feature.png">
</div>
<div class="ftr-cnt col-xs-10">
<h4>GET NOTIFICATIONS</h4>
<p>Get notifications and watch your pizza creation come to life using Pizza Delivery Tracker.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="cat-item3 col-xs-12">
<div class="ftr-img col-xs-2">
<img src="assets/img/inner/feature.png">
</div>
<div class="ftr-cnt col-xs-10">
<h4>TRACK ORDER</h4>
<p>Keep track of your ordered pizza in from the store to your door a real-time.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="cat-item3 col-xs-12">
<div class="ftr-img col-xs-2">
<img src="assets/img/inner/feature.png">
</div>
<div class="ftr-cnt col-xs-10">
<h4>BUY PIZZA</h4>
<p>Find all the available products and buy using Facebook Messenger native payment or any online payments services like Stripe, PayPal or Braintree.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="cat-item3 col-xs-12">
<div class="ftr-img col-xs-2">
<img src="assets/img/inner/feature.png">
</div>
<div class="ftr-cnt col-xs-10">
<h4>EXPLORE MENU</h4>
<p>Explore restaurant menu and meals pictures quikly from here and choose your.</p>
</div>
</div>
</div>
</div>
CSS
.cat-item3{
margin-top: 30px;
background-color: #d3d3d3;
border-radius: 3px;
padding: 35px 25px;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.inner-banner-page {
min-height: 600px;
position: relative;
top: -80px !important;
margin-bottom: -80px;
}