JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<main>
<figure>
      <a class="clue" href="#" title="24.01.2021 17:47 Uhr" target="blank">
    <img class="uiS" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Luftbild_K%C3%B6ln_von_Norden_.jpg/320px-Luftbild_K%C3%B6ln_von_Norden_.jpg" alt="thumb"></a>
      <figcaption>24.01.2021 17:00 Uhr
      <label>
         <input type="checkbox" name="foto" value="Bild1.jpg">
         <span class="visually-hidden">Auswählen</span>
      </label>
    </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 
            <label><span class="visually-hidden">Auswählen</span><input type="checkbox" name="foto" value="Bild1.jpg"></label>

    </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;
}

      
            figure,
      figcaption {
         margin: 0;
      }
      figure {
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr auto;
         font-size: 80%;
         font-weight:bold;
         max-width: 12em;
         margin: 1em;
         padding: 1em 1em 0.2em 1em;
         border-radius: 0.4em;
         background-color: #F2F2F2;
         box-shadow: 1px 2px 4px rgba(0,0,0,.5);
      }
      figure a {
         justify-self: center;
         align-self: center;
      }
      figure img {
         max-width: 100%;
         display: block;
      }
      figcaption {
        margin-top: 0.5em;
      }
      figcaption label { display: block; text-align: center; }
     .visually-hidden {
        font-size: 0;
        margin: 0;
        padding: 0;
     }