JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="header"></div>
<div id="Navbar">
<div id="holder">

<ul>
<li><a href="index.html" id="onlink">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</div><!-- end holder -->
</div><!-- end navbar -->
</body>

CSS

#Navbar {
    width: 760px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;

}

#Navbar #holder {
    height:64px;
    border-bottom:1px solid #000;
    width: 755px;
    padding-left:25px;

}

#Navbar #holder ul {
    list-style:none;
    margin:0;
    padding:0;
}

#Navbar #holder ul li a {
    text-decoration: none;
    float: left;
    margin-right: 5px;

    font-family: "Arial Black", Gadget, sans-serif;
    color: #FFF;
    border: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 20px;
    width: 100px;
    text-align: center;
    display: block;
    background: #69f;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

    line-height: 23px;
}

#Navbar #holder ul li a:hover {
    background:#F90;
    color:FFF;
    text-shadow:1px 1px 1px #000;

}

#holder ul li a#onlink{
    background: #fff;
    color: #000;
    border-bottom: 1px solid #FFF;
}

#holder ul li a#onlink:hover {
        background:#FFF;
        color:#69F;
        text-shadow:1px 1px 1px #000;

}