JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
<ul>
<li><a class = "tab selected" href = "index.html">home</a></li>
<li><a class = "tab" href = "portfolio.html">portfolio</a></li>
<li><a class = "tab" href = "index.html">contact</a></li>
</ul>
</nav>

CSS

nav ul li a.tab { 
    display: inline-block; padding: 15px 20px; min-width: 40px; 
    transition: background .5s ease-in-out;
    -moz-transition: background .5s ease-in-out;
    -webkit-transition: background .5s ease-in-out;
} 
nav ul li a.tab:link, nav ul li a.tab.link { padding: 15px 20px; color: #656359; text-align: center; }
nav ul li a.tab:visited, nav ul li a.tab.visited { color: #656359; }
nav ul li a.tab:hover, nav ul li a.tab.hover { 
    padding: 15px 20px; background-color: #d5d1bc; 
} 
nav ul li a.tab:active, nav ul li a.tab.active { color: #901f78; }