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;}