JSFiddle - React, Tailwind, and code Playground

HTML

<header class="mainHeader">
    <nav><ul>
        <li><a href="#" class="menuActual">Inicio</a></li>
        <li><a href="#">Obras</a></li>
        <li><a href="#">Personas</a></li>
        <li><a href="#">Búsqueda Avanzada</a></li>
        <li><a href="#">Equipo</a></li>
    </ul></nav>
</header>

CSS

.mainHeader nav {
width: 100%;
height: 30px;
margin: 1% 0;
border: 1px solid black;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
width: 100%;
}
.mainHeader nav ul li {
float: left;
display: inline;
width: 20%;
}
ul {
padding-left: 23px;
}
.mainHeader nav ul li a:link, .mainHeader nav a:visited {
width: 80%;
height: 22px;
display: inline-block;
padding: 4px 0;
text-align: center;
color:#FFFFFF;
background-color:#2e2e2e;
border-left:5px solid #2e2e2e;
}