JSFiddle - React, Tailwind, and code Playground

by Nicolas Lips

HTML

<div class="handiToitCartoInfoWindow">
        <div class="nomCommune">
          <span class="value">ARLES</span>
          <hr/>
        </div>
        <div class="bloc total">
                <img src="https://image.ibb.co/dK5XEo/icon_logements.png" alt="Total" border="0">
               <span class="value">8</span>
            <div class="legend">Nombre de logements adaptés présents sur la commune</div>
        </div>
        <div class="bloc labelQualite">
                <img src="https://image.ibb.co/c3hCEo/icon_labellises.png" alt="Labellisés" border="0">
                <span class="value">0</span>
            <div class="legend">Nombre de logements adaptés ayant un label délivré par une collectivité</div>
        </div>
        <div class="repartition">
          <hr/>
            <ul>
                <li class="typeT2">
                    <img src="https://image.ibb.co/kQ15Zo/icon_T1_T2.png" alt="T1/T2" border="0">
                    <span class="value">0</span>
                </li>
                <li class="separateur">&nbsp;</li>
                <li class="typeT3">
                    <img src="https://image.ibb.co/hh1Tn8/icon_T3.png" alt="T3" border="0">
                    <span class="value">2</span>
                </li>
                <li class="separateur">&nbsp;</li>
                <li class="typeT4">
                    <img src="https://image.ibb.co/fn3Kuo/icon_T4.png" alt="T4" border="0">
                    <span class="value">5</span>
                </li>
                <li class="separateur">&nbsp;</li>
                <li class="typeT5">
                    <img src="https://image.ibb.co/jeJV0T/icon_T5.png" alt="T5" border="0">
                    <span class="value">1</span>
                </li>
            </ul>
        </div>
    </div>
    <div>
        <img width="500" src="https://image.ibb.co/fZTKuo/v1_Vignette_Logement_Adapte_2.jpg" alt="v1_Vignette_Logement_Adapte_2" border="0">
    </div>

CSS

.handiToitCartoInfoWindow {
  text-align:center;
}
.handiToitCartoInfoWindow div.nomCommune {
  font-weight: bold;
}
.handiToitCartoInfoWindow div.nomCommune hr {
  width:1em
}
.handiToitCartoInfoWindow div.bloc {
  padding-top: 0.5em;
  width: 17em;
  float: left;
}
.handiToitCartoInfoWindow div.bloc img {
  vertical-align:middle;
  height:40px;
}
.handiToitCartoInfoWindow span.value {
  font-weight: bold;
  font-size: larger;  
}
.handiToitCartoInfoWindow div.bloc .legend {
  margin-top: 0.5em;
}
.handiToitCartoInfoWindow .repartition {
  clear: both;
  padding-top: 0.5em;
}
.handiToitCartoInfoWindow .repartition hr {
    border: 0;
    font-weight:bold;
    border-bottom: 1px dotted;
}
.handiToitCartoInfoWindow .repartition ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  width:33em;
}
.handiToitCartoInfoWindow .repartition ul li {
  margin-top: 0.5em;
  width: 8em;
  float: left;
}
.handiToitCartoInfoWindow .repartition ul li img {
  vertical-align:middle;
  height:40px;
  }
  .handiToitCartoInfoWindow .repartition ul li.separateur {
    line-height:40px;
    border-left:1px solid black;
    width:0px
  }