JSFiddle - React, Tailwind, and code Playground

HTML

<title>Test Menu</title>
       
        
      
        <a href="index.html"><div id="home">Home</div></a>
        <a href="about.html"><div id="about">About Us</div></a>
        <a href="contact.html"><div id="contact">Contact</div></a>

CSS

*{margin:0;padding:0}
div {
    background-color: #B3B3B3;
    transition: background-color 0.5s ease;
    display:inline;
    font-size:20px;
    padding:15px;
    padding-bottom:5px;
    padding-right:7px;
    padding-left:7px;
    border:2px solid black;
    color:black;
    position:relative;
}
a{
    text-decoration:none;
    display:inline-block;
    float:left;
}
.active {
    background-color:#556677;
}

JavaScript

$(document).ready(function(){
    //hover menu
    $('div').hover(function(){
        $(this).addClass('active');
    },function(){
        $(this).removeClass('active');
    });
});