JSFiddle - React, Tailwind, and code Playground

by jojaba

HTML

<figure>
  <img src="http://perso.jojaba.fr/xmedia/images/tesclearbox/donald-1.jpg" alt="Mon chat" />
  <figcaption>
    <dl>
      <dt>Titre du site</dt>
        <dd>Commande&nbsp;: Nom de la la personne</dd>
        <dd>Date&nbsp;: 4<sup>e</sup> trimestre 2015</dd>
        <dd>Description de la commande.</dd>
        <dd>URL&nbsp;: http://www.trucmuche.com/</dd>
    </dl>
  </figcaption>
</figure>

CSS

figure {
  margin: 5px auto;
  padding: 5px;
  width: 500px;
  border: #000 solid 1px
}
img {
  max-width: 100%;
  /* Choisir une des 4 solutions pour que ça marche !
  display: block;
  ou
  vertical-align: top;
  ou
  vertical-align: bottom;
  ou
  vertical-align: middle; */
}
figcaption {
  margin: 0;
  padding: 0;
  background: #F5F5F5;
}
dl {
  margin: 0;
  padding: 0;
  border: red dotted 1px;
}
dt {
  margin: 0;
  padding: 5px;
  color: blue;
  font-weight: bold;
}
dd {
  margin: 0;
  padding: 2px 0 0 20px;
  color: orangered;
}