JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<a href="/foo" class="ctt">
    <picture>
        <img loading="lazy" src="http://1.bp.blogspot.com/-sxgbFY2qNd0/UJGH9jnDeDI/AAAAAAAADrA/J3vv2vIqcSE/s1600/1+%2823%29.jpg" alt="whatever" class="ctt__img">
    </picture>
    <p class="ctt__img__titre">titre image</p>
    <p class="ctt__img__auteur">auteur image</p>
    <h3 class="ctt__titre">titre bloc</h3>
    <p class="ctt__desc">description bloc</p>
</a>

CSS

.ctt {
  display: block;
  max-width: 400px;
}
picture {
  display:block;
  width: 100%;
  padding-top: 75%;
  position: relative;
}
  .ctt__img {
    position: absolute;
    top:0;
    left: 0;
    height:100%;
    width: 100%;
    object-fit : cover;
  }