JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navcont">
     <div id="navigation">
        <ul>
            <li class="home"><a href="#home">Home</a></li>
            <li class="about"><a href="#about">About me</a></li>
            <li class="portfolio"><a href="#portfolio">Portfolio</a></li>
            <li class="contact"><a href="#talktome">Talk to me</a></li>
        </ul>
</div>
</div>

CSS

#navcont{
    height: 80px;
    background-color: #ebebeb;
    width: 100%;
    padding-top: 10px;
}
#navigation{
    font-size: 15px;
    font-family: "TYPOGRAPH PRO" arial;
}
#navigation ul li{
    list-style:none;
    display:inline-block;
    background-color:red;
    width:120px;
}
#navigation ul li a{
    text-transform:uppercase;
    text-decoration:none;
    color:black;
}
#navigation ul li a:hover{
    color:#217c7e;
}

#navigation ul{
    text-align: center;
}