JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="collapse navbar-collapse clearfix" role="navigation">
    	<ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
           	<li><a href="#nos">Sobre nós</a></li>
            <li><a href="#servico">Serviços</a></li>
        </ul>
    </nav>

<section id="service" class="wow fadeInUp">
    	<div class="container">
    		<div class="row">
				<div class="col-md-3 col-sm-3">
					<div class="service-content">
					    <a href="#."><span class="service-icon"><i class="fa fa-desktop img-circle wow flipInX"></i></span></a>
					    <h3>Responsive Layout</h3>
					    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies vestibulum Graphic river molestie.</p>
					</div>
				</div>
</div>
    	</div>
    </section>

CSS

/*-- Main navigation --*/

.navbar-header{
	position: relative;
	z-index: 9999;
}

a.navbar-brand{
	background: #2574A9;
	padding: 4px 10px;
}

.navbar{
	border-radius: 0;
	border: 0;
	margin-bottom: 0;
}


.navbar-nav>li>a{
	padding: 21px 30px;
	font-weight: 600;
}

.navbar-toggle{
	background: #2574A9;
	border-radius: 0;
	margin-right: 5px;
}

.navbar-toggle .icon-bar{
	background: #fff;
}

ul.nav.navbar-nav li{
	background-color: rgba(0,0,0,.8);
}

ul.navbar-nav li a{
	color: #fff;
}

ul.navbar-nav li a:hover, 
ul.navbar-nav li a:focus{
	background: #2574A9;
	color: #fff;
}

ul.navbar-nav > li.active{
	background: none;
}

ul.navbar-nav li.active > a,
ul.navbar-nav > li.active.dropdown.open{
	background: #2574A9;
}

ul.navbar-nav li.active > .dropdown-menu > li.active > a{
	color: #2574A9;
}

ul.navbar-nav li.search{
	margin-left: 10px;
	background: #2574A9;
}


.navbar-nav .dropdown-menu{
	left: 0;
	right: auto;
}

.dropdown-menu * {
	width: 100%;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
}

.navbar-nav .dropdown-menu{
	background: none;
	border: 0;
	box-shadow: none;
	min-width: 240px;
	display: block;
	opacity: 0;
	z-index:1;
	visibility:hidden;
	-webkit-transform: scale(.8);
	-moz-transform: scale(.8);
	-ms-transform: scale(.8);
	-o-transform: scale(.8);
	transform: scale(.8);
	-webkit-transition: visibility 500ms, opacity 500ms, -webkit-transform 500ms cubic-bezier(.43, .26, .11, .99);
	-moz-transition: visibility 500ms, opacity 500ms, -moz-transform 500ms cubic-bezier(.43, .26, .11, .99);
	-o-transition: visibility 500ms, opacity 500ms, -o-transform 500ms cubic-bezier(.43, .26, .11, .99);
	-ms-transition: visibility 500ms, opacity 500ms, -ms-transform 500ms cubic-bezier(.43, .26, .11, .99);
	transition: visibility 500ms, opacity 500ms, transform 500ms cubic-bezier(.43, .26, .11, .99);
}

.navbar-nav .dropdown:hover .dropdown-menu {
	opacity: 1;
	visibility:visible;
	color: #777;
	-webkit-transform: scale(1);
	-moz-transform:...