JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="mon-element">
    <h1>Ma page de pseudo-classes</h1>
    <p>Les pseudo-classes sont très importantes afin de créer des apparences dynamiques en fonction des interactions avec les utilisateurs.</p>
    </div>
    
 <input class="prenom" value="Rouge si focus" />
<input class="nom" value="Vert si focus" />
</body>

CSS

.mon-element:hover {
    background-color: lightgray;
    color: red;
}

h1:hover {
    color: yellow;
}

input:focus {
  color: blue;
}

p {
  color: white;
}

p:hover {
    color: green;
}

.prenom:hover {
  background-color: lightblue;
  color: gray;
}

.prenom:focus {
  background: yellow;
  color: red;
 }
 
 .nom:hover {
   background-color: lightblue;
   color: red;
 }
 
.nom:focus {
  background: yellow;
  color: lime;
}