JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div id="header" class="header">
		<button class="_nav" onclick="screenLeft('navigation','search')"><span class="_icon _nav"></span></button>
		<button class="_search" onclick="screenLeft('search','navigation')"><span class="_icon _search"></span></button>
		<button class="_search _blue" onclick="screenNormal()"><span class="_icon _search"></span></button>
		<img class="logo" src="css/img/sm-logo.png"/>
		<button class="_menu">m<span class="_icon _menu"></span></button>
		<button class="_nav _blue" onclick="screenNormal()"><span class="_icon _nav"></span></button>
		<span onclick="screenNormal()" class="_close"></span>
	</div>
	<div id="navigation" class="navigation">
		<ul>
			<li><a href="#test">Mark Spot</a></li>
			<li><a href="javascript:;" onclick="toggle('subnav')">All<span class="_icon _drop_down"></a>
				<ul id="subnav" class="_sub_navigation">
					<li><a href="javascript:;">Dining</a></li>
					<li><a href="javascript:;">Drinking</a></li>
					<li><a href="javascript:;">Lodging</a></li>
					<li><a href="javascript:;">Fun</a></li>
				</ul>
			</li>
			<li><a href="javascript:;">Contests</a></li>
			<li><a href="javascript:;">Drivers</a></li>
			<li><a href="javascript:;">Chats</a></li>
			<li><a href="javascript:;">Directory</a></li>
			<li><a href="javascript:;">Business Owners</a></li>
			<li><a href="javascript:;">Contact</a></li>
			<li><a href="javascript:;">Features</a></li>
			<li><a href="javascript:;">About</a></li>
		</ul>
	</div>
	<div id="search" class="search">
		<h1>Search</h1>
		<form>
			<label>
				<input type="text" placeholder="e.g. Chinese, Jim's, Kabob..."/>
				<button class="">Go</button>
			</label>
			<span class="_sep"></span>	
			<label>
				<p>Near</p>
				<input type="text" placeholder="Address, Neigborhood etc. ..."/>
			</label>
			<div>
				<p>Previous locations</p>
				<button class="_white" onclick="return false">Select<span class="_icon _drop_down _dark"></span></button>
				<div...

CSS

body{
	background: #222;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}

ul{
	margin:0;
	padding:0;
}

li{
	list-style-type: none;
}

a{
	text-decoration: none;
}

._visible{
	display: block !important;
}

._right{

}

._sep {
	display: block;
	width: 80%;
	margin: 20px auto;
	border-top: solid 1px #242424;
	border-bottom: solid 1px #292929;
	background: black;
	height: 1px;
}

/*--------------------------------------------------------  BUTTONS -----------------------------------------------------*/

button{
	display: block;
	width:48px;
	height:35px;
	background-image: url('img/button-bg.png');
	background-color: transparent;
	border: none;
}

.header button{
	position: absolute;
	top: 5px;
	left: 5px;
}

button._search, button._nav._blue, .header._navigation button._nav, .header._navigation button._menu, button._search._blue, .header._navigation button._search._blue, .header._search button._menu {
	display: none;
}

.search button {
	color: white;
	display: inline-block;
	float: right;
	margin-top: -35px;
	width: 45px;
	position: relative;
	background-color: #1F1F1F;
	background-position: -5px 0px;
	right: -4px;
}

.search button:active{
	background-position: -5px -35px;
}

button._white {
	display: block;
	top: 0;
	font-weight: bold;
	left: 0;
	margin: 10px 0px;
	width: 100%;
	background: white;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.44), 0 2px 5px rgba(0, 0, 0, 0.13);
	box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.75), 0 2px 5px black;
	border-top: solid 1px #4B4B4B;
	color: #333;
	float: none;
}

button._white:active{
	background: #00b0ef;
}

button:active, button._blue{
	background-position: center -35px;
}

.header ._nav._blue, .header ._menu, .header._search button._nav{
	left: auto;
	right: 5px;
}

.header._navigation button._search,.header._navigation button._nav._blue, .header._search button._search._blue {
	display:...

JavaScript

var id = function(x){
	return document.getElementById(x);
},

h = id('header'),
c = id('content'),

toggle = function(x){
	if(id(x).style.display == "block"){
		id(x).style.display = "none";
	} else {
		id(x).style.display = "block";
	}
},

hide = function(x){
	id(x).style.display = "none";
},

show = function(x){
	id(x).style.display = "block";
},

screenNormal = function(){
	hide('navigation');
	hide('search');
	h.className = "header";
	document.body.style.overflowY = "auto";
	c.className = "content";
},

screenLeft = function(x, y){
	show(x);
	hide(y);
	h.className = "header _" + x;
	document.body.style.overflowY = "hidden";
	c.className = "content _right";
};