JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="wrapper">
	<header>
		<nav>
			<img class="logo" src="images/bbc_logo.png" alt="BBC Logo" />
			<a id="search" href="javascript:void(0)"><i class="fa fa-search"></i></a>
			<ul class="mainNav">
				<li>
					<a href="javascript:void(0)"><i class="fa fa-arrow-left"></i></a>
					<ul class="subNav">
						<li><a class="first" href="#"><i class="fa fa-bullseye"></i></span><span class="textHolder">Around Me</span></a></li>
						<li><a href="#"><i class="fa fa-tachometer"></i></span><span class="textHolder">Home</span></a></li>
						<li><a href="#"><i class="fa fa-user"></i></span><span class="textHolder">About</span></a></li>
						<li><a href="#"><i class="fa fa-phone"></i></span><span class="textHolder">Contact Us</span></a></li>
						<li><a href="#"><i class="fa fa-users"></i></span><span class="textHolder">Social Media</span></a></li>
						<li><a href="#"><i class="fa fa-comments-o"></i></span><span class="textHolder">Tell a friend</span></a></li>
						<li><a href="#"><i class="fa fa-calendar"></i></span><span class="textHolder">Events</span></a></li>
						<li><a href="#"><i class="fa fa-book"></i></span><span class="textHolder">Photo Album</span></a></li>
						<li><a href="#"><i class="fa fa-envelope"></i></span><span class="textHolder">Updates</span></a></li>
						<li><a href="#"><i class="fa fa-cog"></i></span><span class="textHolder">Settings</span></a></li>
					</ul>
				</li>
			</ul>
		</nav>
	</header>
	<div class="searchCont">
		<div class="cateCont">
			<input type="text" val="" /><!--
			--><i class="fa fa-search"></i>
			<span class="cate" id="act1">Search by category <i class="fa fa-chevron-circle-right"></i></span>
		</div><!--
		--><div class="cateCont">
			<input type="text" val="" /><!--
		--><i class="fa fa-search"></i>
			<span class="cate" id="act2">Search by input <i class="fa...

CSS

/* CSS, Style Sheet */

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100%;
	font-size: 10px;
	line-height: 10px;
	font-family: "century gothic";
}

body * {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

a img {
	border: 0;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul li ul {
	visibility: hidden;
}

.wrapper {
	max-width: 100%;
	height: 100%;
	background: #20aad7;
	background: url("../images/bg.png"), -moz-linear-gradient(-45deg, #20aad7 0%, #54709f 31%, #64b491 65%, #047074 100%);
	background: url("../images/bg.png"), -webkit-gradient(linear, left top, right bottom, color-stop(0%,#20aad7), color-stop(31%,#54709f), color-stop(65%,#64b491), color-stop(100%,#047074));
	background: url("../images/bg.png"), -webkit-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
	background: url("../images/bg.png"), -o-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
	background: url("../images/bg.png"), -ms-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
	background: url("../images/bg.png"), linear-gradient(135deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
	background-repeat: repeat;
	overflow-x: hidden;
}

header {
	width: 100%;
	height: 70px;
	position: relative;
	background: rgba(0, 0, 0, 0.4);
	border-bottom: 5px solid rgba(0, 0, 0, 0.3);
}


nav {
	height: 100%;
	position: relative;
}

.logo {
	height: 90%;
	position: relative;
	top: 2px;
	left: 3px;
}

.logoL {
	width: 50%;
	position: relative;
	left: 25%;
	top: 5px;
}

#search {
	display: block;
	position: absolute;
	width: 20%;
	height: 100%;
	background: rgba(255, 255, 255, 0.1);
	font-size: 5em;
	color: rgba(0, 0, 0, 0.7);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	top: 0;
	right: 20%;
	text-align: center;
	padding-top: 5px;
	transition: color 0.6s...

JavaScript

var nH = $(window).height() -70;

$('.subNav').css({height: nH});

$('input[type="submit"]').on('click', function() {
    if($('input[type="login"]').val().length === 0) {
        $('.alertError').fadeIn().delay(1000).fadeOut();   
    }
});

$('ul.mainNav li').on('click', function() {
    $(this).find('i').stop(true).toggleClass('active');
    $('ul.subNav, header').stop(true).toggleClass('active');
});

$('#search').on('click', function() {
    $(this).toggleClass('active');
    $('.searchCont').stop(true).slideToggle();

    $('.cate').on('click', function() {
        $('.searchCont').stop(true).toggleClass('active');
    });
});