JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="cta_flex">

<div class="cta_item cta_food">
<img src="https://www.kidwellyfestival.co.uk/food/Dotty_Doughnuts.jpg">
<a href="#">
<div class="cta_contain">
<div class="cta_txt">See what's on the food menu?</div>  
<div class="cta_but">The Food</div> 
</div></a>
</div>

<div class="cta_item cta_drink">
<img src="https://www.kidwellyfestival.co.uk/drink/The_Lemoneers.jpg">
<a href="#"><div class="cta_contain">
<div class="cta_txt">See what's on the drink menu?</div> 
<div class="cta_but">The Drink</div>    
</div></a></div>

<div class="cta_item cta_music">
<img src="https://www.kidwellyfestival.co.uk/music/Rosie_Bell.jpg">
<a href="#"><div class="cta_contain">
<div class="cta_txt">See what's on the music menu?</div> 
<div class="cta_but">The Music</div>    
</div></a></div>

</div>

CSS

html, body {font-size:10px;font-family:arial;}

.cta_flex {gap:1rem;max-width:1000px; margin:auto;display: -webkit-flex;display: flex;-webkit-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: center;justify-content: center;-webkit-align-content: stretch;align-content: stretch;-webkit-align-items: flex-start;align-items: flex-start;}
    
.cta_item {cursor:pointer;aspect-ratio: 1 / 1;width:33.3%;background-color:#DEAA39; border-radius:500px;overflow:hidden;position:relative;}
    
.cta_txt {font-size:2rem;padding:3rem;color:#ffffff;}
.cta_but {background-color:#DA5139;text-decoration:none;font-size:2.5rem;color:#ffffff;padding:0.5rem 1.5rem;border-radius:5px;-webkit-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);-moz-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);}
    
.cta_food img {object-fit: cover;object-position: center;width:100%;height:100%;}  
    
.cta_contain {position:absolute;top:0;left:0;width:100%;height:100%;display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;-webkit-flex-direction: column;flex-direction: column;text-align:Center;background: rgb(222,170,57);background: linear-gradient(0deg, rgba(222,170,57,1) 15%, rgba(0,0,0,0.3981793400954131) 100%);}    

.cta_item:hover .cta_contain {background: rgb(222,170,57);
background: linear-gradient(0deg, rgba(222,170,57,1) 15%, rgba(222,170,57,0) 100%);}
.cta_item:hover .cta_but {background-color:#55AF26;}
    
@media screen and (max-width: 600px) {
.cta_item {width:100%;} 
.cta_flex {max-width:360px;-webkit-flex-direction: column;flex-direction: column;}
}