JSFiddle - React, Tailwind, and code Playground

by gandjyar

HTML

<div class="articles-container flexbox">
<div class="entry sm-col-3">
<div class="entry-header">
<a href="#" class="entry-image-link"><img src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-product-6_large.png"></a></div>
<div class="entry-content">	
<h2 class="entry-title">
<a href="#" class="entry-title-link">Some Long Wrapping Two Line Text</a></h2>
</div>
<div class="entry-footer"></div>
</div>

<div class="entry sm-col-3">
<div class="entry-header">
<a href="#" class="entry-image-link"><img src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-product-6_large.png"></a></div>
<div class="entry-content">	
<h2 class="entry-title">
<a href="#" class="entry-title-link">One Line Text</a></h2>
</div>
<div class="entry-footer"></div>
</div>

<div class="entry sm-col-3">
<div class="entry-header">
<a href="#" class="entry-image-link"><img src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-product-6_large.png"></a></div>
<div class="entry-content">	
<h2 class="entry-title">
<a href="#" class="entry-title-link">One Line Text</a></h2>
</div>
<div class="entry-footer"></div>
</div>

</div>

CSS

* {   margin: 0;   padding: 0;   box-sizing: border-box; }  ::before, ::after {   box-sizing:inherit; }

.flexbox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin:auto;
align-items: stretch;
}

.flexbox .sm-col-3 {
width: calc(1/3 * 100% - 16px);
height: 100%;
}

.entry-header {
width: 100%;
align-items: stretch;
height: 100%;
}

.entry-image-link img {
max-width:100%;
display: block;
margin: 0 auto;
}

.entry-content {
display: block;
padding: 8px 9px 9px;
width: 100%;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: stretch;
align-content: stretch;
margin: 0;
height: 100%;
align-self: stretch;
background: rgba(0, 87, 149, 1);
align-items: stretch;
align-self: stretch;
/*min-height: 100px;*/
}

.entry-title {
margin: 0;
height: 100%;
background: rgba(0, 87, 149, 1);
width: 100%;
display: flex;
align-self: stretch;
justify-content: center;
align-items: stretch;
align-content: stretch;
}

.entry-title-link {
text-align: center;
color: #fff;
height: 100%;
background: rgba(0, 87, 149, 1);
display: flex;
align-self: stretch;
justify-content: center;
align-items: stretch;
align-content: stretch;
}