JSFiddle - React, Tailwind, and code Playground

by Serge Karchmit

HTML

<body onload="menuClose()">

		<header class = "mainHeader">
				<nav>
					<ul id = "mainNav">
						<li><center><img id = "logo" src = "img/logoA.png"></li></center>
						<li id = "search">

							<form name = "searchField">
								<img src = "http://31.media.tumblr.com/7732f8901e9c94cb94aa5cff9e11b2ae/tumblr_n8zm5cD1SL1tgkx81o1_1280.png"><input name = "search" type = "text" placeHolder = "" id = "search">
							</form>

						</li>
						<li><a href ="#"><img src = "img/home.png">HOME</a></li>
						<li><a href ="#"><img src = "img/info.png">ABOUT</a></li>
						<li><a href ="#"><img src = "img/camera.png">PHOTOGRAPHY</a></li>
						<li><a href ="#"><img src = "img/projects.png">PROJECTS</a></li>
						<li><a href ="#"><img src = "img/contact.png">CONTACT</a></li>
						<!-- FOR WEBSITES
							<li><a href ="#"><img src = "https://38.media.tumblr.com/f319cbdb3a9bd4041fd2c6056827794b/tumblr_n9lpsfYFOB1tgkx81o3_1280.png">HOME</a></li>
						<li><a href ="#"><img src = "https://31.media.tumblr.com/1dc400960f59fca2f738ceab516d24f4/tumblr_n9lpsfYFOB1tgkx81o4_1280.png">ABOUT</a></li>
						<li><a href ="#"><img src = "https://38.media.tumblr.com/11cb610a9c031eaf5bb8789cb9739717/tumblr_n9lpsfYFOB1tgkx81o1_1280.png">PHOTOGRAPHY</a></li>
						<li><a href ="#"><img src = "https://31.media.tumblr.com/bd112082d5c902750e78aa9d7dd817fc/tumblr_n9lpsfYFOB1tgkx81o5_1280.png">PROJECTS</a></li>
						<li><a href ="#"><img src = "https://33.media.tumblr.com/e9a7f9ae946bdf2950be96f27023bb78/tumblr_n9lpsfYFOB1tgkx81o2_1280.png">CONTACT</a></li>
						-->
					</ul>
				</nav>
		</header>

		<div id = "menuBg">
		</div>


		<div id = "content" style = "display: inline-block;">

			<a href = "#"><div id = "menu" onclick="menu()">≡</div></a>
			<a href = "#"><div id = "menuClose" onclick="menuClose()">≡</div></a> 
<!--=====================================================================-->
<!--REQUIRED FOR EVERY PAGE...

CSS

*
	{
	margin: 0;
	padding: 0px;
	list-style:	none;
	text-decoration: none;
	letter-spacing: 0.095em;
	font-family: 'Open Sans Condensed', sans-serif;
	transition: 0.2s linear 0s;
	}
html
	{
		width: 100%;
		min-width: 100%;
		display: block;
		background: white;
	}
a, visited
	{
		color: white;
	}

#content, #mainNav
	{
		display: inline-block;
		float: right;
	}



/*======================================================*/
/*				HEADER			*/
/*======================================================*/
#headerIMG
	{
		position: relative;
		background: url('http://38.media.tumblr.com/d88beaf3fe2964af04e8b3d57aa32e97/tumblr_n9gnc0n0Gu1tgkx81o1_1280.jpg')no-repeat center center; 
			-webkit-background-size: cover; 
			-moz-background-size: cover; 
			-o-background-size: cover; 
			background-size: cover;
		bottom: 0;
		width:100%;
		height: 700px;
		z-index: -1;
		margin-top: -1px;
		overflow: hidden;
		color: rgba(0,0,0,0);
	}
#headerText
	{
		width: 80%;
		height: auto;
		position: relative;
		bottom: 500px;
		margin: auto;
		text-align: center;
	}

#title, #title2
	{
		font-size: 180%;
		text-align: center;
	}
#title
	{
		font-size: 180%;
		/*color: rgb(255,0,0);*/
		color: teal;
	}
#title2
	{
		color: rgb(110,110,110);
	}
/*======================================================*/
/*				GLOBAL TAGS			*/
/*======================================================*/
h1
	{
		margin-left: 5%;
		padding: 0;
		font-size: 70px;
		color: white;
	}
h2
	{
		margin-left: 5%;
		padding: 0;
		font-size: 70px;
		color: rgba(70,70,70,1);
	}
h3
	{
		border-bottom: 2px solid gray;
		margin-left: 5%;
		margin-top: 5%;
		padding: 0;
		font-size:30px;
		color: white
	}
h4
	{
		margin-left: 5%;
		padding: 0;
		font-size:30px;
		color: rgba(70,70,70,1);
	}
h5
	{
		margin-left: 5%;
		padding: 0;
		font-size:18px;
		color: white
	}
h6
	{
		margin-left: 5%;
		padding: 0;
		font-size:18px;
		color: rgba(70,70,70,1);
	}
/*======================================================*/
/*				SECTION...

JavaScript

function menu()
		{
		//MOVE SCREENS
		document.getElementById("content").style.left = "-250px";
		document.getElementById("mainNav").style.left = "0px";
		document.getElementById("mainNav").style.width = "250px";
		document.getElementById("mainNav").style.visibility = "visible";
		document.getElementById("menuBg").style.width = "250px";
		document.getElementById("menuBg").style.visibility = "visible";
		//SET FOCUS
		//Show Differnet Button
		document.getElementById("menu").style.visibility = "hidden";
		document.getElementById("menuClose").style.visibility = "visible";
		document.searchField.search.focus();
		//Animate
		var x = document.getElementById('mainNav').getElementsByTagName("LI");
		var delay = 0;
			for (i=0; i<=x.length; i++){

				x[i].style.padding = "0 0 0px 20px";
				x[i].style.transition = "0.1s " + delay +"s !important"
				delay += 0.1;
			}
		var delay = 0;
			for (i=0; i<=x.length; i++){

				x[i].style.padding = "0 0 0px 20px";
				x[i].style.transition = "0.1s " + delay +"s !important"
			}

		}
	function menuClose()
		{
		//MOVE SCREENS
		document.getElementById("content").style.left = "0px";
		document.getElementById("mainNav").style.right = "-250px";
		document.getElementById("mainNav").style.width = "0px";
		document.getElementById("menuBg").style.width = "0px";
		document.getElementById("menuBg").style.visibility = "hidden";
		//SET FOCUS
		document.getElementById('menuClose').focus();
		//Show Differnet Button
		document.getElementById("menuClose").style.visibility = "hidden";
		document.getElementById("menu").style.visibility = "visible";
		//Animate
		var x = document.getElementsByTagName("LI");
		var delay = 0;
			for (i=0; i<=100; i++){
				x[i].style.padding = "0 0 0px 100%";
				x[i].style.transition = "0.3s " + delay +"s"
				delay += 0.04;
			}
		
		}
	function subMenu(){
		document.getElementById("mainNav").getElementsByTagName('UL').style.height =...