JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<body>
	<div class="login">
		<footer></footer>
		<div class="pane">
			<form method="post" action="/login/">
				<div class="form-group">
					<label class=" required-field">E-Mail:</label> 
					<input type="text" name="username" required id="id_username" class="form-control" maxlength="150">
				</div>
				<div class="form-group">
					<label class=" required-field">Password:</label> 
					<input type="password" name="password" required class="form-control" id="id_password">
				</div>
				<button type="submit" class="btn btn-default btn-primary btn-block" value="Login">Login</button><br>
				<a href="/omg">I'm desperated</a>
			<input type="hidden" name="next" value="/" />
			</form>
			<div class="misc text-center">
				Some text
				<br>
				<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
				<a href="http://validator.w3.org/check/referer">HTML5</a>
			</div>
		</div>
	</div>
</body>

CSS

.login .pane {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -128px -138.5px;
    background: #f0f0fd;
    background: rgba(240,240,253,0.90);
    padding: 22px 32px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
}

.login .misc
{
    position: absolute;
    top: 103%;
    left: 0;
    width: 100%;
}

.login footer {
	background: #555;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 50%;
}
.login .misc, .login .misc a{color: white;}
.login footer a:hover {color: #9CF;}