JSFiddle - React, Tailwind, and code Playground

HTML

<nav class = "nav-main" id = "navMain">
               
                <ul>
                    <li>
                      <a href = "#" class = "nav-item"> HOME</a>                              
                    </li>
                    <li>
                       <a href = "#" class = "nav-item">ABOUT US </a>
                    </li>
                    
                     <li>
                       <a href = "#" class = "nav-item">PORTFOLIO </a>
                    </li>
                    
                    <li>
                       <a href = "#" class = "nav-item">SERVICES </a>
                    </li>
                      <li>
                       <a href = "#" class = "nav-item">CONTACT US </a>
                    </li>
                    
              </ul>
        </nav>

CSS

body, html {
 
    margin:0;
    font:1em "Open Sans", "sans-serif";
}

.content{
 
    padding:30px;
}


.nav-main {
    width:100%;
    background-color: #222;
    height:70px;
    color:#fff;
}




.nav-main .logo{
  float:left;
    height:40px;
    padding:15px 30px;
    font-size: 1.4em;
    line-height: 40px;
}


.nav-main > ul {
 
    margin:0;
    float:left;
    list-style-type: none;
}

.nav-main > ul > li {
 
    float:left;
    padding-left: 10px;
    
}

.nav-main > ul > li > a {
 
	text-decoration: none;
	text-align: center;
}

.nav-item {
    display:inline-block;
    padding:15px 20px;
    height:40px;
    line-height:40px;
    color:#fff;
    text-decoration:none;   
}

.nav-item:hover {
   
    background-color:forestgreen;
    
}