JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<!-- Web page to demonstrate HTTP requests
     T. Ruedebusch (hello.html)
-->
<html>
  <head>
<!--    <style>
        h2{
            color:purple;
        }
    </style> -->
    <meta charset="UTF-8">
    <title>Hello</title>
  </head>

  <body>
      <h2 onmouseover = "colormePINK(this)" onmouseout= "colormeBLACK(this)" >A Link Source</h2><br>
      <p id = "total">007</p>
    <img src = "img2.jpg" alt = "no image available" onmouseover = "this.src = 'img1.jpg'" onmouseout = "this.src = 'img2.jpg'">
    <script>
        var count = 0;
        function counter(){
            var count = 10;
            count = count +1;
            document.getElementByID("total").innerHTML = count;
        }
        function colormePINK(x){
            x.style.color = 'pink';
            document.getElementByID("total").innerHTML = "11";
            
        }
        function colormeBLACK(x){
            x.style.color = 'black';
        }
        </script>

  </body>
</html>