JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topPane">
        	<h1 id="georgeLogo">Logo</h1>
			<div id="login">
				<div id="facebookLoginButton">Continue with Facebook</div><br class="lb">            
                <div class="center">or</div><br class="lb">
                	<input type="text" placeholder="Email Address" required><br class="lb">
                    <input type="text" placeholder="Password" required><br class="lb">
                <div id="standardLoginButton">Login</div><br class="lb">
                <div id="copyright">© Copyright 2014</div>
			</div>
        <div id="bottomPane">
            <div id="loginPane">
            Login
            </div>
            <div id="registerPane">
            Sign Up
            </div>
        </div>

CSS

/*********************
FONTS
*********************/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

/*********************
GENERAL
*********************/
body {
	background: #f7f7f7;
}
.lb {
	line-height:2em !important;
}
.center {
	text-align: center;
}

/*********************
TEXT
*********************/
#georgeLogo {
	font-family: 'Droid Serif', serif;
	text-align:center;
	font-size: 8em;
	color: #464646;
	margin-top: 0.2em;
}

/*********************
LOGIN
*********************/
#topPane {
    position:fixed;
    top:0;
    height:90%;
    width:100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	z-index: 1;
}
#topPane input {
	margin: 0 auto;
	border: 0px;
}
#login {
	margin-top: 4em;
}
#login input {
	display: block;
	padding: 0.5em;
	z-index: 1;
}
#facebookLoginButton, #standardLoginButton {
	margin: 0 auto;
	background-color: #3FF;
	text-align: center;
	padding: 0.5em;
}
#bottomPane {
    position:fixed;
    bottom:0;
    height:10%;
    width:100%;
	background: #1f1f1f;
}
#loginPane, #registerPane {
	width: 50%;
	font-size: 1em;
	position: relative;
  	top: 50%;
  	transform: translateY(-50%);
	text-align:center;
	color: #fff;
}
#loginPane {
	float: left;
}
#registerPane {
	float: left;
}
#copyright {
	text-align: center;
}

/*********************
MEDIA QUERIES
*********************/
@media only screen and (min-width: 0px) and (max-width: 480px) {
	#georgeLogo {
		font-size: 5em;
	}
	#facebookLoginButton, #standardLoginButton, #login input {
		font-size: 1em;
		width: 12.5em;
	}
}
@media only screen and (min-height: 0px) and (max-height: 600px) {
	#georgeLogo {
		font-size: 3em !important;
	}
	#facebookLoginButton, #standardLoginButton {
		font-size: 0.8em !important;
	}
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
	#georgeLogo {
		font-size: 5em;
	}
	#facebookLoginButton, #standardLoginButton, #login input {
		font-size: 1em;
		width:...

JavaScript

alert($(window).height());

$(window).resize(function() {
	if ($(window).height() < 450) {
		$('body').html("Please resize your screen.");
	}
	else {
		$('body').remove(this);
	}
});