JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navBar" style="height: 50px; width: 480px;">
    <div id="homeButton">
        <p>Home</p>
    </div>
    <div id="siteAdminButton">
        <p>Site Administration</p>
    </div>
    <div id="contactButton">
        <p>Contact Us</p>
    </div>
</div>

CSS

#homeButton, #siteAdminButton, #contactButton {
    float: left;
    color: #73C20E;
    position:relative;
    width: 160px;
    height: 50px;
    border-top: 4px solid #73C20E;
}
#siteAdminButton, #contactButton {
    border-top: 4px solid #1C1C1C;
}

#navBar .mouseOverNav {
    cursor: pointer;
    border-top: 4px solid #73C20E;
}

JavaScript

$("document").ready(function () {
    $("#homeButton, #siteAdminButton, #contactButton").mouseenter(function () {
        $(this).addClass("mouseOverNav");
    }).mouseleave(function () {
        $(this).removeClass("mouseOverNav");
    });
});