JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	<title>BobbaBooth - Share your face with Habbos</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script>
	function registrationForm(){

	var regForm = document.getElementById("regForm");
	var html = document.getElementsByTagName("html")[0];
	
	regForm.classList.add("front");
	html.classList.add("darken");
	

	form.classList.remove("darken");
	}
	</script>
	
</head>
<body>
	<div id="nav">
		<div id="container">
            <a href="/bobbabooth" class="logo"><img src="http://bobbabooth.com/bobbabooth/images/logo.png" class="logo" title="BobbaBooth Logo"/>
			<span class="logo">BobbaBooth</span></a>
			<form id="login">Username <input type="text" name="username" class="input"> 
			Password <input type="password" name="password" class="input">
			<input type="submit" value="Login" class="loginbtn"</form>
		</div>
	</div>
	<div id="splashcontainer">
		<p class="lander"><a href="http://www.bobbabooth.com" class="default">BobbaBooth</a></span> is a free platform for 
		members of the <a href="http://www.habbo.com" class="default">Habbo</a> community
		to share their photos with other Habbos.</p>
	</div>
</br></br></br>
	<div id="joincenter">
		<a href="#" class="join" onclick="registrationForm()">Join today!</a>
	</div>	
</br></br></br></br></br>
	<div id="brag">
		<div id="container">
			<div id="afro">
				<p class="brag">See what your Habbo friends look like IRL</p>
			</div>
			<div id="speech">
				<p class="brag">Comment and rate your friend's photos</p>
			</div>
			<div id="lock">
				<p class="brag">There are no trolls or bullies on BobbaBooth</p>
			</div>
		</div>	
	</div>
	<div id="footer">
		<div id="container">
			<p class="footer">Copyright BobbaBooth 2013.
			BobbaBooth is not affiliated with Sulake 
			Corporation Oy or its affiliates. Created by 
			<a href="julian.html" class="default">Julian</a>.</p>
		</div>
	</div>
	<div id="regForm">
		<form>
			<span>User</span>
			<input type="text">
			<span>Pass</span>
			<input...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);

#julian {
min-height: 100%;
height: 100%;
position: relative;
}

* {
box-sizing: border-box;
}

img {
border: 0px;
}

body {
font-family: 'Georgia';
margin: 0px;
padding: 0px;
color: #222222;
overflow-y: scroll;
}

p {
margin: 0px;
padding: 0px;
}

a {
text-decoration: none;
color: #FFF;
}

a.default {
text-decoration: none;
color:#FF6666;
border-bottom:1px dashed #FF6666;
font-family:'Georgia';
}

a.default:hover {
text-decoration: none;
color:#FF9999;
border-bottom:1px solid #FF8888;
font-family:'Georgia';
}

#joincenter {
width: 150px;
margin: 0px auto;
}

a.join {
border-radius: 5px;
border: 3px solid #333333;
color: #FFFFFF;
background-color: #222222;
padding: 15px 30px;
width: 750px;
}

a.join:hover {
border-radius: 5px;
border: 3px solid #FF5555;
color: #FFFFFF;
background-color: #FF6666;
padding: 15px 30px;
}

#splashcontainer {
width: 750px;
margin: 0px auto;
}

#container {
width: 900px;
margin: 0px auto;
}

p.lander {
margin-top: 50px;
line-height: 1.5;
font-size: 2.7rem;
text-align: center;
}

#brag {
background-color: #FF6666;
width: 100%;
height: 500px;
}

#afro {
margin-top: 70px;
width: 230px;
height: 230px;
background-image:url('http://bobbabooth.com/bobbabooth/images/afro1.png');
float: left;
}

#speech {
margin-top: 70px;
margin-left: 105px;
width: 230px;
height: 230px;
background-image:url('http://bobbabooth.com/bobbabooth/images/speech1.png');
float: left;
}

#lock {
margin-top: 70px;
width: 230px;
height: 230px;
background-image:url('http://bobbabooth.com/bobbabooth/images/lock1.png');
float: right;
}

p.brag {
font-size: 1.1rem;
font-family: 'Open Sans';
text-align: center;
position: relative;
top: 230px;
}

#footer {
clear: both;
color: #FFFFFF;
height: 75px;
position: absolute;
bottom: 0px;
width: 100%;
background-color: #222222;
}

p.footer {
font-size: 0.8em;
margin-top: 3%;
text-align: center;
}

#nav {
font-family: 'Open Sans';
width: 100%;
height:...