JSFiddle - React, Tailwind, and code Playground

HTML

<html><head><title></title></head>
    <body>
        <div class="container">
            <div class="menu">
                <div class="menu-item">Menu Item 1</div>
                <div class="menu-item">Menu Item 2</div>
                <div class="menu-item">Menu Item 3</div>
                <div class="menu-item">Menu Item 4</div>
            </div>
        </div>
        <div class="container">
            <div class="menu">
                <div class="menu-item">Menu Item 5</div>
                <div class="menu-item">Menu Item 6</div>
                <div class="menu-item">Menu Item 7</div>
                <div class="menu-item">Menu Item 8</div>
            </div>
        </div>
        <div class="container">
            <div class="menu">
                <div class="menu-item">Menu Item 9</div>
                <div class="menu-item">Menu Item 10</div>
                <div class="menu-item">Menu Item 11</div>
                <div class="menu-item">Menu Item 12</div>
            </div>
        </div>
    </body>
</html>

CSS

.menu-active{
     color:red;   
}

JavaScript

$('.container > .menu > .menu-item').hover( 
 
function() { // first function, the 'mouseenter' 
    $(this).addClass('active'); 
}, 
function() { // the second function, the 'mouseleave' 
    $(this).removeClass('active') 
});