JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1">d1</div>
<div id="menu1">menu1</div>
<div id="d2">d2</div>
<div id="menu2">menu2</div>

CSS

body {
    background-color: #000;
    color: #fff;
}

JavaScript

for (var i = 1; i <= 2; i++) {
    (function(i) {
        var d = document.getElementById("d" + i);
        var menu = document.getElementById("menu" + i);
        d.onmouseover = menu.onmouseover = function() { 
            d.id ="d" + i + "On"; 
            d.className = "hover";
            menu.style.color = "#6DC5E6";
        };
        d.onmouseout = menu.onmouseout = function() { 
            d.id = "d" + i; 
            d.className = "";
            menu.style.color = "#FFFFFF";
        };
    })(i);
}