JSFiddle - React, Tailwind, and code Playground

by chetfarley

HTML

<div>
<form>
    <p>
        <label for="name">Your Name</label>
        <input type="text" id="name" />
    </p>
    <p>
    <label for="tel">Your Phone Number</label>
    <input type="tel" id="tel" />
    </p>
</form>
</div>

CSS

div {
    padding:20px;
}
p {
    position:relative;
}
label {
    z-index:1;
    padding-left: 6px;
    font: 12px "Helvetica Neue";
    display:block;
    opacity: 0.75;
    pointer-events: none;
    transition: opacity 0.15s linear;
    -moz-transition: opacity 0.15s linear;
    -webkit-transition: opacity 0.15s linear;
}
label + input {
    display:block;
    background:transparent;
    z-index:2;
    margin-top:-18px;
    margin-bottom:10px;
    padding:3px;
    border:1px solid #ccc;
}

label.focused {
    opacity:0.25;
}
label.populated {
    text-indent:-10000px;
}

JavaScript

$(document).ready(function() {
    $("label + input").each(function(type) {

        $(this).focus(function() {
            $(this).prev("label").addClass("focused");
        });

        $(this).keyup(function() {
            //if ($(this).val() == "") {
            if( !this.value ) {
                $(this).prev("label").removeClass("populated");
            }
            else {
                $(this).prev("label").addClass("populated");
            }
        });

        $(this).blur(function() {
            if( !this.value ) {
                $(this).prev("label").removeClass("focused");
            }
        });
    });
});