JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation"> 
    <ul id="links"> 
        <li><a href="index.html">Home</a></li> 
        <li><a class="active" href="projects.html">Projects</a></li> 
        <li><a href="whyme.html">Why Me?</a></li> 
        <li><a href="contact.html">Contact</a></li> 
    </ul> 
</div>

CSS

#navigation ul#links li a.active{color:#1161A5;margin-bottom:20px;}
#navigation ul#links li a{font-family:LeagueGothicRegular;color:#ADC060;text-decoration:none;padding-left:10px;border-left:2px solid #1161A5;}
#navigation ul#links li a:hover,#navigation li:active{color:#1161A5;}
#navigation ul#links li:first-child a{border-left:none;}
#navigation ul#links li{float:left;font-size:1.5em;margin-left:10px;}