JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="menu">
        <ul class="active">
            <li>
                <a class="header-li" href="">Home</a>
            </li>
            <li>
                <a class="header-li" href="">Our Company</a>
                <ul>
                    <li><a href="">Blank</a></li>
                    <li><a href="">Blank</a></li>
                    <li><a href="">Blank</a></li>
                </ul>
            </li>
            <li>
                <a class="header-li" href="">Services</a>
                <ul>
                    <li><a href="">Blank</a></li>
                    <li><a href="">Blank</a></li>
                    <li><a href="">Blank</a></li>
                </ul>
            </li>
            <li>
                <a class="header-li" href="">Products</a>
                <ul>
                    <li><a href="">Blank</a></li>
                    <li><a href="">Blank</a></li>
                    <li><a href="">Blank</a></li>
                </ul>
            </li>
            <li>
                <a class="header-li" href="">Resources</a>
                <ul>
                    <li><a href="">Blank</a></li>
                    <li><a href="">Blank</a></li>
                    <li><a href="">Blank</a></li>
                </ul>
            </li>    	
        </ul>
        <ul class="toggle-nav">
            <li>
                <div class="toggle-nav-button" href="#">&#9776;</div>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Our Company</a></li>
                    <li><a href="">Services</a></li>
                    <li><a href="">Products</a></li>
                    <li><a href="">Resources</a></li>
                </ul>
            </li>   	
        </ul>
        <form class="search-form">
			<input type="text">
			<button><span class="active-search">Search</span><span class="search-from-drop">&#128269;</span></button>
		</form>
	</nav>

CSS

/*----- Toggle Button -----*/
.toggle-nav {
	display:none;
}
.toggle-nav-button {
	color:#FFF;
	padding: 12px;
	transition:color 0.3s ease;
	max-width: 45px;
	cursor: default;
	-webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}
.toggle-nav-button:hover {
	color:#0d2c87;
	background-color: #909f8e;
	-webkit-transition: background .4s ease;
       -moz-transition: background .4s ease;
        -ms-transition: background .4s ease;
         -o-transition: background .4s ease;
            transition: background .4s ease;
}
@media screen and (max-width: 970px) {
	.toggle-nav {
		float:left;
		display:inline-block;
		text-shadow:0px 1px 0px rgba(0,0,0,0.5);
		color:#FFF;
		font-size:18px;
		text-decoration:none;
	}
	.active {
		display:none;
	}
}
/*-- Toggle Button End --*/

/*---- Main Nav CSS ----*/
/*Colors:  #0d2c87 #7E8F7C  | http://www.hexcolortool.com/7E8F7C#909f8e | */
.menu {
	background-color: #7E8F7C;
	height: 48px;
	width: 100%;
}
nav ul {
	text-shadow:0px 1px 0px rgba(0,0,0,0.5);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
nav li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    max-width: 190px;
	width: 100%;
}
nav a {
    background: #7E8F7C;
    color: #FFF;
    display: block;
    font: 16px/48px sans-serif;
    text-align: center;
    text-decoration: none;
}
.header-li:hover {
	background: #909f8e;
	color: #0d2c87;
	-webkit-transition: background .4s ease;
       -moz-transition: background .4s ease;
        -ms-transition: background .4s ease;
         -o-transition: background .4s ease;
            transition: background .4s ease;

}
nav li ul li:hover a {
    background: #909f8e;
	color: #0d2c87;
	-webkit-transition: background .4s ease;
       -moz-transition: background .4s ease;
        -ms-transition: background .4s ease;
         -o-transition:...