JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="" class="active">Home</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
</ul>

CSS

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: #222222;
}

ul > li {
    display: inline-block;
}


a {
    text-align: center;
    line-height: 50px;
    background: #222222;
    display: block;
    padding: 0 10px 0 10px;
    text-decoration: none;
    text-transform: uppercase;
    color: #ffffff;

}

a:hover, a:visited, a:focus, a:active {
    outline: none;
    text-decoration: none;
    background: #000000;
}

a.active {
    background: #000000;
}