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 = "https://31.media.tumblr.com/cfc2c43f7e34ec3fcb60405fa5d4f5a5/tumblr_n9nvpjtNNW1tgkx81o1_1280.png"></center>
						</li>
						<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 = "https://38.media.tumblr.com/f319cbdb3a9bd4041fd2c6056827794b/tumblr_n9lpsfYFOB1tgkx81o3_1280.png" alt = "img/home.png">HOME</a>
						</li>
						<li><a href ="#">
							<img src = "https://31.media.tumblr.com/1dc400960f59fca2f738ceab516d24f4/tumblr_n9lpsfYFOB1tgkx81o4_1280.png" alt = "img/info.png">ABOUT</a>
						</li>
						<li id = "section"><a href ="#">
							<img src = "https://38.media.tumblr.com/11cb610a9c031eaf5bb8789cb9739717/tumblr_n9lpsfYFOB1tgkx81o1_1280.png"alt = "img/camera.png">PHOTOGRAPHY</a>
							<ul>
								<li><a href = "/photography">San Francisco</a></li>
								<li><a href = "#">Lake Tahoe</a></li>
							</ul>
						</li>
						<li id = "section"><a href ="#">
							<img src = "https://31.media.tumblr.com/bd112082d5c902750e78aa9d7dd817fc/tumblr_n9lpsfYFOB1tgkx81o5_1280.png"alt = "img/projects.png">PROJECTS</a>
							<ul>
								<li><a href = "/projects#informative">Informative</a></li>
								<li><a href = "/projects#profile">Profile</a></li>
							</ul>
						</li>
						<li id = "section"><a href ="#">
							<img src = "https://33.media.tumblr.com/e9a7f9ae946bdf2950be96f27023bb78/tumblr_n9lpsfYFOB1tgkx81o2_1280.png"alt = "img/contact.png">CONTACT</a>

							<ul>
								<li><a href = "http://www.twitter.com/skarchmit" target =" _blank">Twitter</a></li>
								<li><a href = "http://www.instagram.com/skarchmit" target ="...

CSS

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



/*======================================================*/
/*				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;
		top: 0;
		width:100%;
		height: 800px;
		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);
	}
#more
	{
		/*background: darkgray;*/
		background: rgba(100,100,100,0.4);
		border-radius: 10px;
		font-size: 15px;
		padding: 10px;
		position: relative;
		top: -5px;
	}
#more:hover
	{
		background: gray;
	}
/*======================================================*/
/*				GLOBAL TAGS			*/
/*======================================================*/
h1, h2, h3, h4, h5, h6
	{
		margin: 0px 0;
		padding: 0px 0 0px 0;
	}
#sectionTitle
	{
		padding: 0px 0 20px 0;
	}
h1, h2, h3, h4, h5, h6{margin-left: 5%;}
h1, h2{	font-size: 5vw;}
h3, h4{	font-size: 2vw;}
h5, h6{	font-size: 1vw;}
h1, h3, h5 {color: rgba(90,90,90,1);}
h2, h4, h6 {color: rgba(255,255,255,1);}
/*======================================================*/
/*				SECTION 1	(FOR USE WITH HEADER IMG)		*/
/*======================================================*/
#one
	{
		background:...

JavaScript

function menu()
		{
		//Show Differnet Button
		document.getElementById('menu').style.opacity = "0";
		document.getElementById('menuClose').style.opacity = "1";

		//MOVE SCREENS
		document.getElementById("content").style.WebkitTransform = "translate3d(-250px,0,0)";
		document.getElementById("content").style.MozTransform = "translate3d(-250px,0,0)";
		document.getElementById("content").style.OTransform = "translate3d(-250px,0,0)";
		document.getElementById("content").style.msTransform = "translate3d(-250px,0,0)";
		document.getElementById("content").style.Transform = "translate3d(-250px,0,0)";
		document.getElementById("mainNav").style.width = "250px";
		document.getElementById("menuBg").style.width = "250px";
		document.getElementById("menuBg").style.visibility = "visible";

		document.getElementById("menuClose").style.visibility = "visible";
		document.getElementById("menu").style.visibility = "hidden";
		
		//Animate
		var x = document.getElementById('mainNav').getElementsByTagName("LI");
		var delay = 0;
		var transition = 0;
			for (i=0; i<=x.length; i++){
				x[i].style.WebkitTransform = "translate3d(0px,0,0)";
				x[i].style.transition = "-WebkitTransform " +transition + "s " + delay +"s";
				delay += 0.02;
				transition += 0.04; // The higher the number, the slower of exponential decay
				if (x[i].querySelectorAll('ul li').length>0){
					x[i].style.background = "rgba(0,0,0,0.35)";
					}
			}
		}
	function menuClose()
		{
		
		document.getElementById("menuClose").style.opacity = "0";
		document.getElementById("menu").style.opacity = "1";
		//MOVE SCREENS
		//document.getElementById("content").style.left = "0px";
		document.getElementById("content").style.WebkitTransform = "translate3d(0px,0,0)";
		document.getElementById("menuBg").style.width = "0px";
		document.getElementById("mainNav").style.width = "0px";
		
		document.getElementById("menuBg").style.visibility = "hidden";
		//Show Differnet...