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;
}

#homeButton:hover, #siteAdminButton:hover, #contactButton:hover{
   cursor: pointer;   
   border-top: 4px solid #73C20E;
}