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>

CSS

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

.flexbox {
display: grid;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
grid-gap: 0 10px;
margin:auto;
grid-template-columns: repeat( auto-fill, 280px);
}

.flexbox .sm-col-3 {
display:grid;
grid-row: span 5; /* as we have 5 card components in each card */
grid-template-rows:subgrid;
border: 1px solid #ddd;
}

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

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

.entry-title {
margin: 0;
}

.entry-title-link {
text-align: center;
color: #fff;
height: 100%;
}