JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="primary_nav">
    <ul>
        <li><a href="Contact">Contact</a></li>
        
        <li><a href="Resume">Resume</a></li>
        <li><a href="Bio">Bio</a></li>
        <li><a href="Home">Home</a></li>
        <li class="selected"><a href="Portfolio">Portfolio</a></li>
    </ul>
</nav>

CSS

#primary_nav {
    position: relative;
    text-align: center;
}

#primary_nav li {
    float: left;
    width: 50%;
}

#primary_nav li:nth-child(-n+3){
    margin-bottom: 40px; /*must match height set on "primary_nav a"*/
}




/*add all your link/button styles here*/
#primary_nav a {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px 10px 6px;
    border: 1px solid #aaa;
    height: 40px; 
}