JSFiddle - React, Tailwind, and code Playground

by Serge Karchmit

HTML

<body onload="menuClose()" 
	onload = "viewClose()">

				<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;
		text-decoration: none;
	}
#tumblr_controls
    {
        height: 0px !important;
        width: 0px !important;
        visibility: hidden !important;
    }


/*======================================================*/
/*				HEADER			*/
/*======================================================*/
#headerIMG
	{
		position: relative;
		background: url('http://38.media.tumblr.com/d88beaf3fe2964af04e8b3d57aa32e97/tumblr_n9gnc0n0Gu1tgkx81o1_1280.jpg')no-repeat center center; 
		background-color: white;
			-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: auto;
		margin-top: 0px;
		overflow: hidden !important;
		color: rgba(0,0,0,1);
	}
#headerText
	{
		overflow: hidden;
		width: 80%;
		height: 800px;
		position: relative;
		top: 150px;
		bottom: 0;
		margin: auto;
		text-align: center;
	}

#title, #title2
	{
		font-size: 180%;
		text-align: center;
	}
#title
	{
		font-size: 180%;
		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:...

JavaScript

/*
element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";
*/

/*======================================================*/
/*				TABS			*/
/*======================================================*/
function menu(){
			   	colorMenu("orange");
				toggleOn("menuClose");	
				hamburgerOpen();
				moveScreen(250,"content");
				expand(250, "mainNav");
				animate(0,"mainNav",0.04,0.02);		
				closeTab("viewNav");	
		}
function menuClose(){
				toggleOff("menuClose");
				hamburgerClose();
				closeTab("mainNav");
				animate(250,"mainNav",0.04,0.04);
		}


function view(){
				//CLOSE TABS
				closeTab("mainNav"); hamburgerClose();

				//COLOR MENU BG
				document.getElementById("menuBg").style.background = "red";
				//MOVE OBJECTS
				moveScreen(100,"content");
				expand(100,"viewNav");
				//SWICTH BUTTONS
				toggleOn("viewClose");
			  	}
function viewClose(){
				toggleOff("viewClose");
				toggleOn("view");
				moveScreen(0,"content");
				closeTab("viewClose");
			}


function moveScreen(num,element)
			{
				document.getElementById(element).style.WebkitTransform = "translate3d(-"+ num + "px,0,0)";
			}
function expand(num, element){document.getElementById(element).style.width = num + "px";}
function hamburgerClose()
		{
		document.getElementById('lineOne').style.WebkitTransform = "translate3d(0px,0px,0) rotate(-180deg)";
		document.getElementById('lineOne').style.width = "40px";
		document.getElementById('lineTwo').style.borderRadius = "15px";
		document.getElementById('lineTwo').style.width = "16px";
		document.getElementById('lineTwo').style.height = "0px";
		document.getElementById('lineTwo').style.top = "11px";
		document.getElementById('lineTwo').style.left = "0px";
		document.getElementById('lineTwo').style.WebkitTransform = "translate3d(0px,0px,0)";
		document.getElementById('lineTwo').style.MozTransform =...