<form>
<header class="form-header text-center">
<h2>Sign In</h2>
<p>This is an example sign in form that features a reset password link, remember me and create account button.</p>
</header>
<div class="form-group">
<label for="input-username" class="hide">Username</label>
<input type="text" class="input" id="input-username" placeholder="Username">
</div>
<div class="form-group">
<label for="input-password" class="hide">Password</label>
<input type="password" class="input" id="input-password" placeholder="Password">
</div>
<div class="form-group">
<div class="input-group inline">
<label class="checkbox"><input type="checkbox"> Remember Me</label>
<p class="note float-right"><a href="#">Forgotten your password?</a></p>
</div>
</div>
<footer class="form-action text-center">
<div class="input-group inline">
<button class="button primary">Sign In</button>
<span class="note input-align"><em>or</em></span>
<button class="button default">Create Account</button>
</div>
</footer>
</form>
form {
max-width: 400px;
margin-left: auto;
margin-right: auto;
background: $white;
background-clip: padding-box;
border: 3px solid rgba($black, 0.1);
@include border-radius();
}
form .form-header,
form .form-group,
form .form-action {
margin: 0;
padding: 20px;
}
form .form-group,
form .form-action {
border-top: 1px solid rgba($black, 0.1);
}