JSFiddle - React, Tailwind, and code Playground

HTML

<div id="portfolionav">
    <ul class="filter">
        <li>Filter</li>
        <li class="web"><a href="#">Web</a></li>
        <li class="still"><a href="#">Still</a></li>
        <li class="motion"><a href="#">Motion</a></li>
        <li class="games"><a href="#">Games</a></li>
        <li class="current all"><a href="#">All</a></li>
    </ul>    
</div>

CSS

body {background:#282828;}

#portfolionav {
    font: 1em Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-align:right;
    margin: 25px 0;
} 

#portfolionav li {
    list-style-type:none;
    display:inline;    
    padding: 2px 8px;    
}

#portfolionav li:first-child {
    background: none;
    color:#ffa273;
}

#portfolionav li a:link, #portfolionav li a:active, #portfolionav li a:visited {
    text-decoration:none;
    color:#FFF;    
    
    padding: 2px 8px;
}

#portfolionav li a:hover {
    background:#000000;
    color:#FFF;
}