JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navBar" style="height: 50px; width: 480px;">
    <div id="homeButton" style="float: left; color: #73C20E; position:relative; width: 160px; height: 50px; border-top: 4px solid #73C20E;">
        <p>Home</p>
    </div>
    <div id="siteAdminButton" style="float: left; color: #73C20E;  position: relative; width: 160px; height: 50px; border-top: 4px solid #1C1C1C;">
        <p>Site Administration</p>
    </div>
    <div id="contactButton" style="float: left; color: #73C20E;  width: 160px; height: 50px; border-top: 4px solid #1C1C1C;">
        <p>Contact Us</p>
    </div>
</div>

CSS

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

JavaScript

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