JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div class="container">
        <div class="row">
            <div class="col-md-offset-4 col-md-4">
						
					<div class="[ container ]">
					<h4><i class="glyphicon glyphicon-lock pull-right" style="font-size:24px;color:gold"></i><label>Windows Login</label></h4>	
						<div class="[ row ]">
							<div class="[ col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4 ]">
								<div class="[ form-group ]">
									<input id="username" placeholder="Username" class="[ form-control ]" data-toggle="label" data-value="">
									<label for="username" style="">Username:</label>
								</div>
							</div>
						</div>

						<div class="[ row ]">
							<div class="[ col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4 ]">
								<div class="[ form-group ]">
									<input id="password" placeholder="Password" class="[ form-control ]" data-toggle="label" type="password" data-value="">
									<label for="password" style="">Password:</label>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="[ col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4 ]" style="text-align:right;">
								<button class="btn btn-default">Login <i class="glyphicon glyphicon-chevron-right"></i></button>
							</div>
						</div>
					</div>

			</div>
		</div>
	</div>

CSS

.form-group {
    position: relative;   
}
.form-group [data-toggle="label"] {
    height: 44px;
    padding-top: 16px;
}
.form-group [data-toggle="label"] + label {
    font-size: 12px;
	left: 12px;
	opacity: 1;
	position: absolute;
	top: 3px;
	transition: all 0.3s ease-in-out;
}
.form-group [data-toggle="label"]:required + label {
    color: rgb(255, 0, 0);
}

/* Positioning */
.form-group [data-toggle="label"][data-value=""] {
    padding-top: 6px;
}
.form-group [data-toggle="label"][data-value=""] + label {
	opacity: 0;
	top: 18px;
}

JavaScript

$(document).ready(function(){
    $('[data-toggle="label"]').attr('data-value', $(this).val()).on('keyup change', function() {
		$(this).attr('data-value', $(this).val());
	});
    $('label').on('click', function() {
		$('#' + $(this).attr('for')).focus();
	});    
    
});