JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul id="navi">
		<li><a href="index.html" id="homenav">Home</a></li>
		<li><a href="about.html" id="aboutnav">About</a></li>
		<li><a href="services.html" id="servnav">Services</a></li>
		<li><a href="portfolio.html" id="portnav">Portfolio</a></li>
		<li><a href="contact.html" id="contactnav">Contact</a></li>
    </ul>
				
</nav>

CSS

body{
	background-color: #8CC63F;
	color: white;
	font-family: "Helvetica Condensed";
	}

/* START NAV MENU */

nav {
  height:40px;
  display:block;
   border-top:solid 1px;
   border-bottom: solid 11px;
    margin:0;
    padding:10;
   
}
 
#navi {
  list-style: none;
    margin:0;
    padding:0;
    
}
 
#navi li {
  float:left;
  position: relative;
} 
 
#navi li a {
  display: block;
  text-decoration: none;
  color: black;  
}

 
#navi li a:hover {
  color: white;
}