JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<div id="mainHeader" role="banner">
				<div class="container">
					<div class="row">
						<nav class="navbar navbar-default scrollMenu" role="navigation">
							<div class="navbar-header">
								<!-- responsive navigation -->
								<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<!-- Logo -->
								<a class="navbar-brand" href="./?page=main"><img src="images/Imagens_Nomyu/Logo_Nomyu_horizontal.png"></a></div>
									<div class="collapse navbar-collapse" id="mainMenu">
								<!-- Main navigation -->
									<ul class="nav navbar-nav pull-right clearfix">
										<li class="primary <?php if($page == 'main'){ echo 'active'; } ?>">
											<a href="./?page=main" class="firstLevel last" >Home</a>
										</li>
										<li class="primary <?php if($page == 'about'){ echo 'active'; } ?>">
											<a href="./?page=about" class="firstLevel last" >About us</a>					
										</li>
										<li class="primary">
											<a href="#" class="drop">Features</a><!-- Begin 4 columns Item -->
											<div class="dropdown_4columns align_right"><!-- Begin 4 columns container -->
												<div class="col-md-4">
													<h3>Technical</h3>
													<ul class="clearfix">
														<li><a href="#">ThemeForest</a></li>
														<li><a href="#">GraphicRiver</a></li>
														<li><a href="#">ActiveDen</a></li>
														<li><a href="#">VideoHive</a></li>
														<li><a href="#">3DOcean</a></li>
													</ul>   
													  
												</div>
										 
												<div class="col-md-4">
												 
													<h3>Design</h3>
													<ul...

CSS

#mainMenu .navbar-nav li{
	border-bottom:1px solid #555;
}
#mainMenu .navbar-nav li:last-child,
#mainMenu .navbar-nav li:last-child a{
	//border-bottom:none !important;
}

#mainMenu li:hover {
    background:none;
    border:none;
    padding:0;
    margin:0;
}
 
#mainMenu li a {
    display:block;
    outline:0;
    text-decoration:none;
}
 
#mainMenu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #FFFFFF;
}

 
/* Drop Down */
  
.dropdown_4columns{
    float:left;
    position:absolute;
    display:none; /* Hides the drop down */
    text-align:left;
    border-top:none;
    background-color:#eee;
}
 
.dropdown_4columns {width: 560px;}
 
#mainMenu li:hover .dropdown_4columns{
    display:block;
    top:auto;

}

#mainMenu li:hover .align_right {
    left:auto;
    right:-1px;
    top:auto;
}
 
/* Drop Down Content Stylings */
 
#mainMenu p, #mainMenu h2, #mainMenu h3, #mainMenu ul li {
    line-height:21px;
    font-size:12px;
    text-align:left;
}
#mainMenu h2 {
    font-size:21px;
    font-weight:400;
    letter-spacing:-1px;
    margin:7px 0 14px 0;
    padding-bottom:14px;
    border-bottom:1px solid #666666;
}
#mainMenu h3 {
    font-size:14px;
    margin:7px 0 14px 0;
    padding-bottom:7px;
    border-bottom:1px solid #888888;
}
#mainMenu p {
    line-height:18px;
    margin:0 0 10px 0;
}
 
#mainMenu li:hover div a {
    font-size:12px;
    color:#015b86;
}
#mainMenu li:hover div a:hover {
    color:#029feb;
}

#mainMenu li ul {
    list-style:none;
    padding:0;
    margin:0 0 0px 0;
}
#mainMenu li ul li {
    position:relative;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
	display:block;
}
#mainMenu li ul li:hover {
    background:none;
    padding:0;
    margin:0;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active >...