JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="top-bar">
        
    			



      			<section><!-- Nav Section -->
      			<ul class="right" >
        
        			<li><a class="active" href="/">Home<span>the main</span></a></li> 
        
        			<li><a  href="service">Service<span>the main</span></a></li>
                    
                    <li><a href="portfolio">Portfolio<span>the main</span></a></li>
              
                    <li><a href="contact">Price<span>the main</span></a></li>
              
        			<li><a href="about">About<span>the main</span></a></li>
                
        			<li><a href="contact">Contact<span>the main</span></a></li>
        
      			</ul>
                </section><!-- End Nav Section -->

  			</nav>

CSS

.top-bar { background: none; font-family: 'dosis' sans-serif; margin: 0 0 0 15px; padding: 0; height:45px; width: 100%;}
.contain-to-grid .top-bar { width: 940px; margin: 0 auto; }

.top-bar > ul .name{display: none;}
.top-bar > ul .name h1 { line-height: 45px; margin: 0;}
.top-bar > ul .name h1 a { font-weight: bold; padding: 0 22.5px; font-size: 17px !important; }
.top-bar > ul .name img { vertical-align: middle; }
.top-bar ul { display: inline; height: auto; line-height: 45px; list-style: none;}
.top-bar ul > li { float: left; border-left: 1px solid #f1f1f1;}

.top-bar ul > li a:not(.button) {display: block; color:#464646; font-size: 17px; font-weight: 700; height: auto; line-height: 45px; padding: 10px 25px 0px 15px;  text-transform: uppercase; }
.top-bar ul > li:hover a {background:#f8f8f8;  -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }
.top-bar ul > li:hover a.active { background:#f8f8f8; color:#666; }
.top-bar ul > li a.active { background:#f8f8f8; }
.top-bar ul > li:hover a{ background:#f8f8f8;  }
.top-bar ul > li:hover, .top-bar ul > li.active { background: none; }
.top-bar ul > li.active a { color: #fff; }
.top-bar ul > li.divider { background: black; -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1); -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1); height: 100%; margin-right: 1px; width: 1px; }
.top-bar ul > li.has-button a.button { margin: 0 11.25px; }
.top-bar ul > li.has-button:hover { background: #222222; }
.top-bar ul > li.has-button:hover a { color: #fff; }
.top-bar ul > li.search { padding: 0 15px; }
.top-bar ul > li.search form { display: inline-block; margin-bottom: 0; vertical-align: middle; width: 200px; }
.top-bar ul > li.search form input[type=text] { -moz-border-radius-topright: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; -moz-border-radius-bottomright: 0;...