JSFiddle - React, Tailwind, and code Playground

by Alphonsio

HTML

<div class="container">
  <div class="carre"></div>
  <div class="carre"></div>
  <div class="carre"></div>
  <div class="carre"></div>
</div>

CSS

body {
  background-color: #ddd;
}
.container {
  display: flex;
  justify-content: space-around; /* Espace uniformément autour des éléments */
  align-items: center; /* Centrer les éléments verticalement */
  height: 100vh; /* Optionnel: pour centrer verticalement sur toute la page */
}
.carre {
  width: 100px;  /* Largeur de chaque carré */
  height: 100px; /* Hauteur de chaque carré */
  background-color: #3498db; /* Couleur du carré (bleu) */
  border-radius: 15px; /* Bord arrondi */
  margin: 10px; /* Espacement entre les carrés, optionnel */
}