JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="section">
    <span class="s-head">Personal Information</span>
    <div class="s-gate">
        <div><label>First Name</label><input type="text" name="fname" class="fname"></div>
        <div><label>Middle Initial</label><input type="text" name="mname" class="mname"></div>
        <div><label>Last Name</label><input type="text" name="lname" class="lname"></div>
    </div>
</div>

CSS

body{
	background: #eee;
	font-size: 14px;
	line-height: 21px;
	padding: 0;
	margin: 0;
	font-family: Verdana, Geneva, sans-serif;
}
#wrapper{
	display: block;
	width: 940px;
	padding: 40px;
	background: #fff;
	margin: 40px auto;
	box-shadow: 0 0 5px #ccc;
}
.s-head{
	display: inline-block;
	width: 256px;
	padding-right: 20px;
}
.s-gate{
	display: inline-block;
	width: 660px;
}
.s-gate div label{
	display: block;
	padding: 3px 0px 1px 8px;
	position: absolute;
	z-index: 1;
}
.s-gate div input{
	height: 20px; 
	background: rgba(255,255,255,.5);
	position: relative;
	z-index: 2;
	font-size: 14px;
	line-height: 21px;
	font-family: Verdana, Geneva, sans-serif;
	text-indent: 3px;
}
.s-gate div input:focus{
	background: rgba(255,255,255,.8);
	transition: background .2s;
	-webkit-transition: background .2s;
}
.s-gate div input.filled{
	background: rgba(255,255,255,1);
}

JavaScript

$(".s-gate div input").keyup(function(){
    if($(this).val()) {
        $(this).addClass('has-content');
    }else{
        $(this).removeClass('has-content');
    }            
});