JSFiddle - React, Tailwind, and code Playground

HTML

<div class="site-nav">
    <ul>
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li class="current"><a href="#">four</a></li>
        <li><a href="#">five</a></li>
        <li><a href="#">six</a></li>
    </ul>
</div>

CSS

.site-nav ul {
    padding: 0;
    margin: 0;
    font-size: 0; /*remove inline block gap*/
}
.site-nav ul li {
    background: linear-gradient(#fefefe, #d0d0d0);
    border-top: #bdbdbd solid 1px;
    border-bottom: #bdbdbd solid 1px;
    display: inline-block;
    width: 16.66%;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
}
.site-nav ul li a {
    display: block;
    font-family: Helvetica, sans-serif;
    font-size: .75rem; /*reset font size*/
    text-transform: uppercase;
    letter-spacing: .08rem;
    text-decoration: none;
    color: #616264;
    text-shadow: rgb(224, 224, 224) 1px 1px 0px;
}
.site-nav ul li a:hover {
    background: linear-gradient(#e1e3e6, #babcbf);
}
.site-nav ul li.current a {
    background: #fff;
    border: #bdbdbd solid 1px;
    border-width: 0 1px;
}
.site-nav ul li.current a:before {
    content: "";
    height: 4px;
    display: block;
}