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>
</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...

JavaScript

$(window).on('load',function() {
    var body;
    var bodyVisible = true;
    
    function resize() {
        if (bodyVisible==true && $(window).innerHeight()<450) {
            bodyVisible = false;
            body = $('body').html(); //store current body content before removing it
            $('body').html("Please resize your screen.");
        } else if (bodyVisible==false && $(window).innerHeight()>=450) {
            bodyVisible = true;
            $('body').html(body); //restore body content
        }
    }
    resize(); //invoke resize() on page-load
    $(window).resize(resize); //invoke resize() on page-resize
});