JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.yaml.de/yaml/core/base.css">
<link rel="stylesheet" href="http://www.yaml.de/yaml/forms/gray-theme.css">
<link rel="stylesheet" href="http://www.yaml.de/yaml/screen/typography.css">
<header id="header">
	
	<div id="top-menu">
		<div class="ym-wrapper">
			<div class="ym-wbox">
				<div class="logo">
					<h1><a href="#">Example.com</a></h1>
				</div>
				<ul>
					<li id="popover-user"><a href="#"><i class="icon-user icon-white"></i> <span class="text">User</span></a></li>
					<li><a href="#"><i class="icon-envelope icon-white"></i> <span class="text">Messages</span> <span class="alert">123</span></a> </li>
					<li><a href="#"><i class="icon-exclamation-sign icon-white"></i> <span class="text">Alerts</span> <span class="alert">123</span></a></li>
					<li><a href="#"><i class="icon-off icon-white"></i> <span class="text">Logout</span></a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class="popover">
		<div class="top">
					<h4>Welcome,<br />User</h4>
					<a href="#">Your User Profile</a>
					<div class="last-visit">
						Your last visit was 1.1.1970, 00:00
					</div>
		</div>
		<div class="middle">
                    <div>... Some Links</div>
					<div class="ym-clearfix"></div>
		</div>
	</div>

	<nav>
		<div class="ym-wrapper">
			<div class="ym-wbox">
				<ul>
					<li>
						<a href="#">
							<div>Home <i class="icon-home"></i></div>
							<span>Go to Main Page</span>
						</a>
					</li>
					<li class="active navi-users-toggle">
						<a href="#" class="">
							<div>Users <i class="icon-search"></i></div>
							<span>Search User Accounts</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>Map <i class="icon-globe"></i></div>
							<span>Users near you</span>
						</a>
					</li>
				</ul>
			</div>
			<div class="ym-clearfix"></div>
		</div>
	</nav>

	<div id="navi-users">
		<div class="ym-wrapper">
			<div class="ym-wbox">
				<form>
					<div...

CSS

html, body, td, th {
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 13px;
	color: #666;
}

/* LINKS */

a {
	color:#CA278C;
	background: transparent;
	text-decoration:none;
}
a:active {
	outline: none;
}
a:hover,
a:focus {
	background: transparent;
	color:#9C1C6B;
	text-decoration:none;
}

/* HEADER */

header {
	background-color: #ccc;
	padding-top: 50px;
}

/* MAIN NAVIGATION */

header nav {
	clear: both;
	width:100%;
	position:relative;
	white-space: nowrap;
	padding-top:10px;
	border-bottom: 2px solid #CA278C;
}
header nav ul {
	list-style: none;
	padding:0;
	margin:0;
	display:inline;
}
header nav ul li {
	display: inline-block;
	border-top: 2px solid transparent;
	margin: 0 5px -1.5px 0;
	background-color: #f0f0f0;
	border-bottom: 1.5px solid #CA278C;
	line-height: 180%;
}
header nav ul li.active,
header nav ul li:hover {
	border-top: 2px solid #CA278C;
	border-bottom: 2px solid #fff;
	background-color: #fff;
}
header nav ul li.active {
	border-right: 2px solid #CA278C;
	border-left: 2px solid #CA278C;
}
header nav ul li a {
	display: inline-block;
	padding: 5px 16px;
}
header nav ul li a div {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 16px;
}
header nav ul li a span {
	font-size: 11px;
	color: #999
}
header nav [class^="icon-"],
header nav [class*=" icon-"] {
	vertical-align: baseline;
	line-height: inherit;
	opacity: 0.7;
}
header nav ul li.open {
	background-color: #FFE9E8;
	border-bottom: 2px solid #FFE9E8;
}

/* TOP MENUE */

#top-menu {
	position: fixed;
	left: 0;
	top: 0;
	width:100%;
	z-index:99;
	background-color: #333;
	border-bottom: 2px solid #CA278C;
	height: 30px;
}
#top-menu .ym-wbox {
	position: relative;
}
#top-menu .logo {
	float: left;
}
#top-menu .logo h1 {
	font-size: 19px;
	margin: 0;
}
#top-menu ul {
	margin: 0;
	padding: 0 10px;
	z-index: 100;
	right: 0;
	position: absolute;
}
#top-menu ul li {
	list-style: none;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}
#top-menu ul li a {
	color:...

JavaScript

// Top-Navi Popovers:

$(document).ready(function() {
	// Hide the popover clicking anywhere ..
	$(document).click(function() {
		$('.popover').slideUp(function(){
			$('#top-menu ul li').removeClass('active');
		});
	});
	// .. except form clicing on link or popover:
	$('.popover, #popover-user').click(function(e) {
		e.stopPropagation();
	});
	// Show the popover:
	$('#popover-user').click(function(e) {
		e.preventDefault();
		if ($('.popover').is(':hidden')) {
			$(this).addClass('active');
			var offset = $(this).offset();
			$('.popover').css({
				top: offset.top + 25,
				left: offset.left
			});
			$('.popover').slideDown();
		} else {
			$('.popover').slideUp(function() {
				$('#popover-user').removeClass('active');
			});
		}
	});
});

// Navi Users:

$(document).ready(function($) {
	$('#navi-users').hide();
	$('.navi-users-toggle').click(function(e) {
		e.preventDefault();
		$('#users-bottombar').slideUp('slow', function() {
			if ($('#navi-users').is(':hidden')) {
				$('.navi-users-toggle, #navi-users').addClass('open');
			}
			$('#navi-users').slideToggle('slow', function() {
				if ($('#navi-users').is(':hidden')) {
					$('.navi-users-toggle, #navi-users').removeClass('open');
				} else {
					$('.navi-users-toggle, #navi-users').addClass('open');
				}
			});
		});
	});
	// Link in Search:
	$('.navi-users-show').click(function(e) {
		e.preventDefault();
		var completeCalled = false;
		$("html, body").animate({
			scrollTop: 0
		},
		{
			complete: function() {
				if(!completeCalled){
					completeCalled = true;
		$('.navi-users-toggle, #navi-users').addClass('open');
		$('#navi-users').slideDown('slow');
				}
			}
		});
	});
});

// Navi Users Search + Bottombar

$(document).ready(function($) {
	$('#users-search').change(function() {
		$('#navi-users').slideUp('slow', function() {
			$('.navi-users-toggle, #navi-users').removeClass('open');
			$('#users-bottombar').slideDown('slow', function() {
				$("#users-bottombar .show...