JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="container-fluid parent">
    <div class="row child">
        <div class="col-sm-4 col-sm-offset-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <strong class="panel-title">Login</strong> 
                </div>
                <div class="panel-body">
                    <form method="POST">
                        <div class="form-group">
                            <input type="text" placeholder="Username" class="form-control" id="Username"/>
                        </div>
                        <div class="form-group">
                            <input type="password" placeholder="Password" class="form-control" id="Password"/>
                        </div>
                        
                            <label for="Remember">Remember Me</label>
                            <input type="checkbox" class="enhanced" id="Remember"/>
                        
                        <input type="submit" value="Sign In" class="btn btn-success btn-block"/>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.parent {
  position: absolute;
    top:0;
    bottom:0;
    width:100%;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
    width:100%;
}

input[type=checkbox].enhanced {
    margin:3px;
    position: relative;
    top:1px;

}
input[type=checkbox].enhanced:before {
	cursor: pointer;
    content:"";
	position: absolute;
	width: 19px;
	height: 19px;
    top:-3px;
    left:-3px;
	border: 1px solid #ccc;
    border-radius: 3px;
	background: #FFF;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

input[type=checkbox].enhanced:hover::before {
    border-color: #66afe9;
}

input[type=checkbox].enhanced:after {
	opacity: 0;
	content: '';
	position: absolute;
	width: 11px;
	height: 8px;
	background: transparent;
	top: 1px;
	left: 1px;
	border: 3px solid #555;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

input[type=checkbox].enhanced:hover::after {
	opacity: 0.3;
}

input[type=checkbox].enhanced:checked::after {
	opacity: 1;
}