JSFiddle - React, Tailwind, and code Playground

HTML

<div class="width30">
    <div class="header">TEST</div>
    <div class="odd">TEST</div>
    <div class="even">TEST</div>
    <div class="odd">TEST</div>
    <div class="even">TEST</div>
    <div class="odd">TEST</div>
</div>
<div class="width30">
    <div class="header">TEST</div>
    <div class="odd">TEST</div>
    <div class="even">TEST</div>
    <div class="odd">TEST</div>
    <div class="even">TEST</div>
    <div class="odd">TEST</div>
</div>
<div class="width30">
    <div class="header">TEST</div>
    <div class="odd">TEST</div>
    <div class="even">TEST</div>
    <div class="odd">TEST</div>
    <div class="even">TEST</div>
    <div class="odd">TEST</div>
</div>

CSS

div{
    width:80px;
    height:40px;
    border:1px solid;
    float:left;
}
.width30{
    text-align:center;
}
.header{
    font-weight:bold;
}
.odd{
    background:lightyellow;
}
.even{
    background:lightblue;
}
.div_over{
    background:red;
}

JavaScript

var oddArr = document.getElementsByClassName("odd");
for(i=0;i<oddArr.length;i++){
        oddArr[i].addEventListener("mouseover",function(){this.setAttribute("class","div_over")});
        oddArr[i].addEventListener("mouseout",function(){this.setAttribute("class","odd")});
}
var evenArr = document.getElementsByClassName("even");
for(i=0;i<evenArr.length;i++){
        evenArr[i].addEventListener("mouseover",function(){this.setAttribute("class","div_over")});
        evenArr[i].addEventListener("mouseout",function(){this.setAttribute("class","even")}); 
}