JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<div class="fluid-container" id="loginScreen">
<div class="flexbox-container">
<div class="col-md-4 col-lg-4 col-sm-12 col-xs-12 col-md-offset-4 col-lg-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="text-center">Login</h3>
</div>
<div class="panel-body">
<form name="login">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="loginCtrl.login.username">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="loginCtrl.login.password">
</div>
<div class="form-group">
<div class="checkbox col-md-8 col-lg-8 col-sm-12 colxs-12 noleftpadding">
<label>
<input type="checkbox"> Remember Me.
</label>
</div>
<div class="col-md-4 col-lg-4 col-sm-12 col-xs-12 norightpadding">
<button type="button" class="pull-right btn btn-md btn-primary">Login</button>
</div>
</div>
</form>
</div>
<div class="panel-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Forgot Password</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Register</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">View Demo</button>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;.
align-items: center;
}