JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
<ul>
    <li class="active"><a Href="/index.php">Post Blog</a></li>
    <li><a Href="/menu.php">Lunch Menu</a></li>
    <li><a Href="/calendar.php">Calendar</a></li>
    <li><a Href="/shop.php">Shop</a></li>
</ul> 
</div>

CSS

#nav{
position: fixed;
width: 180px;
background-color: rgba(255,255,255, 0.8);  
}
#nav ul{
list-style: none;
margin: 0;
padding: 0;
}
#nav li a:link, li a:visited{
display: block;
padding: 15px 15px;
border-left: 8px solid #005b86;
text-decoration: none;
color: #333333;  
}
#nav li a:hover{
background-color: #005b86;
color: #FFF;
}
#nav li.active a:link{
background-color: #005b86;
color: #FFF;    
}