JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form">
    <label>First Name Testing <span><span></label>
    <input type="text" />
    <label>Last Name</label>
    <input type="text" />
    <label>Email</label>
    <input type="text" />
    <input type="submit" value="Submit" />
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}
html {
    height: 100%;
}
body {
    height: 100%;
    padding-top: 20px;
    background: #7db9e8;
    /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data: image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMSUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -webkit-radial-gradient(center, ellipse cover, #7db9e8 1%, #1e5799 98%);
    background: -moz-radial-gradient(center, ellipse cover, #7db9e8 1%, #1e5799 98%);
    background: -o-radial-gradient(center, ellipse cover, #7db9e8 1%, #1e5799 98%);
    background: -ms-radial-gradient(center, ellipse cover, #7db9e8 1%, #1e5799 98%);
    background: radial-gradient(center, ellipse cover, #7db9e8 1%, #1e5799 98%);
    /* W3C */
    /* IE6-8 fallback on horizontal gradient */
}
.form {
    margin-top: 100px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid #ccc;
    margin: auto;
    width: 75%;
    padding: 20px;
}
.form input {
    width: 100%;
    display: block;
    padding: 5px 10px;
    margin-bottom: 5px;
}
.form input.not-filled-in {
    color:#bbb;
}
input[type='submit'] {
    border: none;
    padding: 10px;
    color: white;
    text-transform: uppercase;
    margin-top: 20px;
    background: #c9de96;
    /*...

JavaScript

/*
    Create the placeholders from the labels
*/
//loop through each label and
$("label").each(function () {
    //make a variable for this label
    el = $(this);
    //get the value of the label
    label_value = el.html();
    //hide the label
    el.hide();
    //target the next sibling input and
    //fill it with the label's value
    el.next('input').val(label_value).addClass("not-filled-in");
});

/*
	Handle the form placeholders actions (clearing & replacing)
*/
//when the input is clicked on (like if you were to type in it)
$("input").focus(function () {
    //make a variable for this input
    el = $(this);
    //make a variable for it's current value
    input_value = el.val();
    //get the value that it's label is
    label_value = el.prev('label').html();
    //check to see if the current value matches the 
    //old label value
    if (input_value == label_value) {
        //if it does clear the form
        el.val('').removeClass("not-filled-in");
    }
})
//when the input is no longer focused (ie. you click away)
$("input").blur(function () {
    el = $(this);
    if (el.val() == '') {
        label_value = el.prev('label').html();
        el.val(label_value).addClass("not-filled-in");
    }
});