JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <h1>
  QUEL CASSE TETE ces sélecteurs !!
  </h1>
</header>

<div class="wrapper">
  <div class="box1">1.<br>
  <ul>
    <li>LES SELECTEURS SIMPLES</li>
    <li>&nbsp;&nbsp;Les sélecteurs de type.<br></li>
    <li>&nbsp;&nbsp;Les sélecteurs de class.</li>
    <li>&nbsp;&nbsp;Les sélecteurs d'identifiants.</li>
    <li>&nbsp;&nbsp;Le sélecteur universel.</li>
    <li>&nbsp;&nbsp;Les sélecteurs d'attribut.</li>
  </ul>
  </div>
  
  <div class="box2">2.
  <ul>
    <li>COMBINATEURS CSS</li>
    <li>&nbsp;&nbsp;Les sélecteurs de voisin direct.</li>
    <li>&nbsp;&nbsp;Les sélecteurs de voisins.</li>
    <li>&nbsp;&nbsp;Les sélecteurs d'éléments enfants.</li>
    <li>&nbsp;&nbsp;Les sélecteurs d’éléments descendants.</li>
    <li>&nbsp;&nbsp;****************</li>
    <li>* Sélecteurs CSS avancés avec les pseudo-classes.</li>
    <li>* Aller plus loin avec les pseudo-éléments.</li>
  </ul>
  </div>
  
  <div class="box3">3.<br>
  <p>
  SELECTEUR DE TYPE :<br>
  < a >Lien vers le site à cibler.< /a ><br>
  <br>
  a { <br>
// déclarations CSS<br>
}
 </p>
 </div>
  
  <div class="box4">4.<br>
  <p>
  SELECTEUR DE CLASS :<br>
  < p class="introduction">Introduction de l’article.< /p><br>
  <br>
  .introduction {<br>
// déclarations CSS<br>
}
</p>
  </div>
  
  <div class="box5">5.<br>
  <p>
  SELECTEUR D'IDENTIFIANTS :<br>
  < nav  id="menu">Menu du site< /nav><br>
 <br>
 #menu {<br>
//déclarations CSS<br>
}<br>
</p>
</div>

  <div class="box6">6.<br>
  <p>
  SELECTEUR UNIVERSEL :<br>
  Sélecteur représenté par le caractère « * ».<br>
  <br>
  Utilisez-le seul pour pouvoir modifier tous<br> les éléments d’un document dans une<br> seule règle CSS.
  <br>
  <br>
  * {<br>
    //déclarations CSS<br>
   }
  </p></div>
</div>

 <div class="box7">7.<br>
  <p>
  SELECTEUR D'ATTRIBUT :<br>
  < p id="premier">Premier paragraphe< /p><br>
  < p class="important">Deuxième paragraphe< /p><br>
  < p id="dernier" class="important">Troisième paragraphe< /p><br>
  <br>

  [id]...

CSS

.wrapper {
  margin-top: 5px;
  height: auto;
  display: grid;
  border: 2px solid red;
  padding: 5px;
  gap: 5px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  flex-wrap: wrap;
  font-family: cursive;
  font-size: 1em;
  color: blue;
}

header {
  background-color: gray;
  border: 2px solid blue;
  color: yellow;
  text-align: center;
}


.box1 {
  color: red;
}

footer {
  margin-top: 5px;
  padding: 5px;
  border: 2px solid red;
  background-color: gray;
}

[class] {
  display: flex;
  border: 1px solid blue;
  padding: 5px;
  background-color: orange;
}

* {
  border-radius: 5px;
  color: blue;
}

li {
  list-style-type: none;
}