JSFiddle - React, Tailwind, and code Playground

HTML

<div class=topnav>
    <ul>
        <li><a href="#" class=active>home</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">webhosting</a></li>
        <li><a href="#">about</a></li>
    </ul>
</div>

CSS

.topnav {
margin: 0 164px 0 0;
float: right;
}

.topnav ul {
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
}
.topnav ul li {
    float: left;
}

.topnav ul li a {
    display: block;
    float: left;
    color: #000;
    padding: 51px 10px 9px;
    text-align: center;
    font: bold 16px Rockwell;
    text-decoration: none;
}


.topnav ul li a:hover,.topnav ul li .active {
    background: #00ffff;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    -o-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

.topnav ul:hover li .active {
    background: none;
}

.topnav ul li .active:hover {
    background: #ff0000;
}