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

nav {
	display:block;    
    /*below demo style*/
    background: red;
}

nav ul {
	display:inline-block;
	width:100%;
    list-style-type: none;
    margin:0;
    padding: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;
}