JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
 <a href="myphoto.jpg">
 <img src="myphoto.jpg" alt="" height="48px" width="100%" />
 <div class="desc">XXX</div>
 </a>
 </div>


 <div class="gallery">
 <a target="_blank" href="myphoto.jpg">
 <img src="myphoto.jpg" alt="" height="48px" width="100%" />
 <div class="desc">XXX</div>
 </a>
</div>

CSS

div.gallery {
margin: 1%; 
-webkit-box-shadow: 10px 10px 25px #000;
-moz-box-shadow: 10px 10px 25px #000; 

 box-shadow: 10px 10px 25px #000; 
 float: left;
 min-width: 180px;
 width: 23%;
 }

 div.gallery a{
   width: 100%;
 background-color: red;
 display: inline-block !important;
 }


 div.gallery img {
 display:block;
 position: absolute;
 }

 div.desc {

 padding: 15px;
 text-align: center;
 }