JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<header> </header>
<div id="wrapper">
  <main>
    <section class="mysection" id="section1">1 </section>
    <section class="mysection" id="section2">2 </section>
    <section class="mysection" id="section3">3 </section>
    <section class="mysection" id="section4">4 </section>
  </main>
  <div class="clear"> </div>
</div>
<footer> </footer>
<script>

  function changeMe(t_section, count)
  {
    if(count==0)
    {
      t_section.style.backgroundColor="yellow";
    }
    if(count==1)
    {
      t_section.style.backgroundColor="blue";
    }
    if(count==2)
    {
      t_section.style.backgroundColor="green";
    }
    if(count==3)
    {
      t_section.style.backgroundColor="red";
    }
  };

  function changeBack(t_section)
  {
    t_section.style.backgroundColor="gray";
  };

  (function(){
    var sec = document.getElementsByClassName("mysection");
    console.log(sec);
    for(var i=0; i<4; i++)
    {
      sec[i].addEventListener('mouseover', function() {
        var index = i;
        return function() {
          changeMe(sec[index], index);
        };
      }());
      sec[i].addEventListener('mouseout', function() {
        var index = i;
        return function() {
          changeBack(sec[index]);
        };
      }());
    }
  })();
</script>