JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p id="monPara" onmouseover="foncRouge()" onmouseout="foncVert()">bonjour</p>
    <p class="rouge">rouge</p>
    <p class="vert">vert</p>
    
    <script>
      var monPara = document.getElementById("monPara");
      

      function foncRouge() {
          monPara.classList.remove("vert");
          monPara.classList.add("rouge");
      }
      function foncVert() {
          monPara.classList.remove("rouge");
          monPara.classList.add("vert");
      }
    </script>
  </body>
</html>

CSS

.rouge {
  color: red;
}
.vert {
  color: green;
}