JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar">

    <ul>
      <li><a href="Home.html">HOME</a></li>
      <li><a href="About.html">ABOUT</a></li>
      <li><a href="work.html">MY WORK</a></li>
      <li><a href="Contact.html">CONTACT</a> </li>
      
    </ul>

</div>

CSS

#navbar{
    width:auto;
    height:35px;
    border-bottom-color:#3498DB;
    border-bottom-style:solid;
    text-align:center;
}

li
{
    font-size: 15px;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    display:inline-block;
    text-align:center;    
}

ul li a {
    padding: 20px;
}

a
{
    color: #3498DB;
    text-decoration: none;
}

a:hover
{
    color:#02B565;
}