JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<div class="tile_flex">
<div class="tile">
<img src="https://www.hloe.co.uk/300x200.jpg">
<a href="#">My SEO Link text is a very long link indeed</a>
<span>£900K - LONDON</span>
</div>
<div class="tile">
<img src="https://www.hloe.co.uk/300x200.jpg">
<a href="#">My SEO Link text is a very long link indeed and this one is even longer so it goes to the next line</a>
<span>£900K - LONDON</span>
</div>
<div class="tile">
<img src="https://www.hloe.co.uk/300x200.jpg">
<a href="#">My SEO Link text is a very long link indeed</a>
<span>£900K - LONDON</span>
</div>
</div>CSS
body {background-color:#eeeeee;}
.tile_flex {display: -webkit-flex;display: flex;-webkit-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;flex-wrap: wrap;
-webkit-justify-content: center;justify-content: center;-webkit-align-content: space-between;align-content: space-between;-webkit-align-items: stretch;align-items: stretch;gap:20px;}
.tile {background-color:#ffffff;width:300px;border:1px solid #dddddd;position:relative;text-align:center;box-sizing: border-box;padding:0 0 40px 0;}
.tile img {display:block;width:100%;aspect-ratio:3/2;}
.tile span {position:absolute;bottom:0;left:0;right:0;color:#eeeeee;box-sizing: border-box;background-color:#396B95;margin:0 10px 10px;padding:7px;border-radius:5px;}
.tile:hover span {cursor:pointer;background: rgb(57,107,149);
background: linear-gradient(135deg, rgba(57,107,149,1) 0%, rgba(70,130,180,0.7511379551820728) 25%, rgba(70,130,180,1) 45%, rgba(70,130,180,0.7455357142857143) 65%, rgba(70,130,180,1) 85%, rgba(57,107,149,1) 100%);}
.tile a {position: static;color:#396B95;text-decoration:none;padding:10px;line-height:20px;display:block;box-sizing: border-box;
&:before {bottom: 0;content: "";left: 0;overflow: hidden;position: absolute;right: 0;top: 0;white-space: nowrap;z-index: 0;}
&:hover, &:focus { &:before { /* empty */ }}}