JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<main>
<figure>
      <a class="clue" href="#" title="24.01.2021 17:47 Uhr" target="blank">
    <img class="uiS" src="https://i.postimg.cc/sxTzcgc1/Bild1.jpg" alt="thumb"></a>
      <figcaption class="figcaptionXYZ">24.01.2021 17:00 Uhr             
    </figcaption>
      </figure>
      

      
      
      
      
      <figure>
      <a class="clue" href="#" title="24.01.2021 17:47 Uhr" target="blank">
    <img class="uiS" src="https://i.postimg.cc/sxTzcgc1/Bild1.jpg" alt="thumb"></a>
      <figcaption class="figcaptionXYZ">24.01.2021 17:00 Uhr 
    </figcaption>
      </figure>
      </main>

CSS

main {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         justify-content: space-around;
         justify-content: flex-start;
      }

.uiS {
background: #FFF;
border-top: 10px solid #F2F2F2;
border-right: 14px solid #F2F2F2;
border-bottom: 25px solid #F2F2F2;
border-left: 14px solid #F2F2F2;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 2px 4px rgba(0,0,0,.5);
margin-top:10px; 
margin-left:0px; 
margin-bottom:10px; 
margin-right:10px;
}

      .figcaptionXYZ {
         left: 14px;        
      }
      
            figure,
      figcaption {
         padding: 0;
         margin: 0;
      }
      figure {
         position: relative;
         max-width: 1500px;
         margin: 0.8rem 0.3rem;
      }
      figure img {
         max-width: 100%;
         display: block;
      }
      figcaption {
         position: absolute;
         width: 95%;
         FONT-SIZE:10px;
		 font-weight:bold;
		 text-align:left;  
         bottom: 15px;
         left: 8px;

      }