JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header-navi-wrap">
<div class="header-navi">
<div class="header-navi-inner">
	<nav id="top-menu" class="fake">
	<ul id="menu-primary-navigation" class="menu">
		<li class="current-menu-item"><span class="menu-item-wrap linecon-globe">
			<a  title="Home Page" href="index.html"><span class="link-text">Home</span></a></span>
		</li>
		<li><span class="menu-item-wrap linecon-camera">
			<a  title="Our Work" href="portfolio/index.html"><span class="link-text">Portfolio</span></a></span>
		</li>
	
	</ul>
	</nav>			
<div class="cl"></div>
</div>
</div>
</div>

CSS

/* -----------------------------------------
   Fixed menu navigation
----------------------------------------- */

.header-navi {
    width: 100%;
    z-index: 999;
    top:0;
}
.header-navi-inner {
    width: 1200px;
    margin: 0 auto;
}
#header .row {
    padding-bottom: 18px;
}
.small-logo {
    max-width: 15%;
    float:left;
    margin:7px 0 0 2%;
}
.small-logo img {
	max-height:35px;
}
.droped-navi {
	position:fixed;
    display: none;
    left:0;
	top:-60px;
	height:56px;
	width:100%;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    background: #ffffff;
    background: rgba(255, 255, 255, .95);
	z-index:9999;
	padding:3px 0 0;
	opacity:0;
}
.droped-navi.active {
    display: block;
}
.droped-navi-inner {
	max-width:1200px;
	margin:0 auto;
}
#drop-top-menu {
	float:right;
}
#drop-top-menu li .menu-item-wrap:before {
	display:none;
}
#header  #drop-top-menu .menu li .link-desc {
	display:none;
}
#drop-top-menu li {
	list-style:none;
}
#drop-top-menu > ul > li {
	float:left;
	font-size:14px;
}
#top-menu {
    float: none;
    padding-top: 12px;
}
#top-menu>.menu {
    margin: 0 auto;
    padding: 0 10px;
}
#header #drop-top-menu .menu > li {
	width:auto;
	padding-bottom:0;
}
#header #drop-top-menu .menu {
	width:auto;
	margin-top:13px;
}
#header #drop-top-menu .menu .link-text{
	color:#5E6063;
}
#header #drop-top-menu .menu ul li > .menu-item-wrap .link-text:hover,
#header #drop-top-menu .menu ul .current-menu-item > .menu-item-wrap .link-text  {
	color:#ffffff;
}
#header #drop-top-menu .menu > li > .menu-item-wrap {
	padding:0 40px 20px 0;
}
#header #drop-top-menu .menu > li > ul {
	margin:0;
	top:38px;
}
#header #drop-top-menu .menu > li > ul > li:first-child:after,
#header #drop-top-menu .menu > li > ul > li:first-child:before {
	left:40px;
}
/* -----------------------------------------
   Top menu
-----------------------------------------...