JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 boxes">
<figure class="panel panel-default h-100 d-flex flex-column">
<div class="panel-heading">
<img src="img/image.jpg" class="img-responsive">
</div>
<div class="panel-body flex-grow-1">
<h3 class="panel-title">Lorem Ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor magna id sem elementum molestie. Aliquam molestie nisl tortor, nec imperdiet sapien tincidunt eget. Mauris vel scelerisque dolor. Vestibulum a nisl tempus, dictum nisi non, sagittis dui. Vestibulum sodales est vel velit efficitur feugiat. Maecenas elit eros, ornare sit amet felis eget, imperdiet rutrum arcu. Cras vel tincidunt nibh. Pellentesque sagittis est mi, sit amet tempus dui ultrices sed. Cras tincidunt neque in lacus sodales ornare. Praesent luctus ipsum vel vehicula consectetur. Sed mollis est eu semper consequat.
</p>
</div>
<div class="panel-footer mb-3"><a href="sample.aspx" class="btn btn-primary btn-block">BUTTON SAMPLE</a></div>
</figure>
</div>
<div class="col-sm-6 col-md-4 boxes">
<figure class="panel panel-default h-100 d-flex flex-column">
<div class="panel-heading">
<img src="img/image.jpg" class="img-responsive">
</div>
...
CSS
.col-sm-6.col-md-4.boxes {
background-color: red;
}