JSFiddle - React, Tailwind, and code Playground
by lucyman76
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-2 padd-top">
<div class="col-xs-12 item">
<div class='col-xs-3 col-xs-offset-1 box'></div>
<div class='col-xs-6 col-xs-offset-1 box'>
<h4>Guidebook</h4>
<h5>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 padd-top">
<div class="col-xs-12 item">
<div class='col-xs-3 col-xs-offset-1 box'></div>
<div class='col-xs-6 col-xs-offset-1 box'>
<h4>Guidebook</h4>
<h5>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-2 padd-top">
<div class="col-xs-12 item">
<div class='col-xs-3 col-xs-offset-1 box'></div>
<div class='col-xs-6 col-xs-offset-1 box'>
<h4>Guidebook</h4>
<h5>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 padd-top">
<div class="col-xs-12 item">
<div class='col-xs-3 col-xs-offset-1 box'></div>
<div class='col-xs-6 col-xs-offset-1 box'>
...
CSS
.item{
height: 150px;
background-color: #285e8e;
font-size: 30px;
padding: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
}
.padd-top{
padding-top: 10px;
}
.box{
background-color: #28a4c9;
height: 100%;
}