JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#">a</a>

        </li>
        <li><a href="#">b</a>

        </li>
        <li><a href="#">c</a>

        </li>
        <li><a href="#">d</a>

        </li>
        <li><a href="#">e</a>

        </li>
    </ul>
</nav>

CSS

body {
    margin: 0;
}
nav {
    display:block;
    /*below demo style*/
    background: red;
}
nav ul {
    vertical-align: top;
    display:inline-block;
    width:100%;
    height: 100%;
    list-style-type: none;
    margin:0;
    padding:0;
    top: 0;
}
nav ul li {
    float: left;
    width: 100px;
    height:100%;
    margin-right: calc((100% - 500px) / 4);
}
nav ul li:last-child {
    margin-right:0;
}
nav a {
    display:inline-block;
    width:100%;
    height:100%;
    /*below demo style*/
    background:yellow;
}