JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    	<ul class="menu">
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="/work/">Products</a></li>
  <li><a href="/contact/">Careers</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>
    </div>

CSS

#nav{
	/*background:url(../images/bg-footer.png);*/
	width:960px;
	/* height:48px; */
	background:#222222;
	
}

.menu{
    /* border:1px #000; */
   width:960px; 
   margin:auto;
   padding: 0;
	
    list-style:none;
	text-align:center;
	
}

.menu li{
    display:block;
     border-right:5px solid #222222;
	 border-bottom:3px solid #222222;
    float: left;
    font-family: 'Open Sans', sans-serif;
	font-size:14px;
	background:#0C5E91;
}
.menu li:hover {
 background:#95d629;
}

.menu li a{
    
   display:block;
   padding: 10px;
    font-family: 'Open Sans', sans-serif;
	font-size:14px;
   width: 144px;
    height: 20px;
}

.menu li a{ 
    text-decoration:none;
    color:white;
	}