JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div id="page-contain">
            <div class="contain">
                <form class="contact-form">
                        <input type="text" id="contact-name" class="float" value="Name">
                        <input type="email" id="contact-email" class="float" value="Email">
                </form>
            </div>
        </div>

CSS

html,body{display:block;height:100%;width:100%;margin:0;padding:0}body{background:#fafafa;color:#444;font-size:1em;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}*{box-sizing:border-box}::selection{background:#d0e3f1}h1,h2,h3,h4,h5,h6{margin:0;line-height:1em;color:#444}h1{font-size:2.375em;padding-bottom:0.52632em;letter-spacing:0.02em}h2{font-size:1.75em;padding-bottom:0.71429em;letter-spacing:0.02em}p{font-family:Georgia,serif;font-size:1em;line-height:1.7em;letter-spacing:.05em;padding-bottom:1.25em;margin:0;text-align:justify}a{color:#07c;text-decoration:none;background:url("http://localhost:8888/projects/float-label/assets//underline.png") 0 17px repeat-x;text-shadow:-2px 0 0 #fafafa,-1px 0 0 #fafafa,0px 0 0 #fafafa,1px 0 0 #fafafa,2px 0 0 #fafafa;background-size:1px}a::selection{text-shadow:-2px 0 0 #d0e3f1,-1px 0 0 #d0e3f1,0px 0 0 #d0e3f1,1px 0 0 #d0e3f1,2px 0 0 #d0e3f1}input{color:#999;padding:10px;margin:0;font-size:0.875em;line-height:1em;border-radius:4px;border:none;box-shadow:0 0 0 #07c,0 1px 1px #dfdfdf inset;outline:none;transition:.3s}input:focus{color:#555}#page-contain{padding-top:7em}.contain{display:block;width:640px;margin:0 auto}.contain>form{display:block;width:400px;margin:0 auto}.contain>form>span{margin-bottom:20px}.contain>form input{width:400px}.float-label-ctn{display:inline-block;position:relative}.float-label-ctn>.float-label{position:absolute;top:0;left:0;height:100%;width:100%;padding:10px;margin:0;font-size:0.875em;line-height:1em;color:#999;opacity:1;transition:.3s;cursor:text}.float-label-ctn.active .float-label{opacity:0}.float-label-ctn.active-filled .float-label{color:#94BEE4;opacity:0}

JavaScript

var floatLabel = $(".float");

$(floatLabel).each(function(){
    var input = $(this),
        title = $(this).val(),
        id = $(this).attr("id"),
        label = "<label class='float-label' for='"+id+"'>"+title+"</label>";

    input.wrap("<span class='float-label-ctn'></div>");
    input.val("");

    var ctn = input.parent();

    $(label).insertAfter(input);

    input.focus(function(){
        var userText = input.val();
        ctn.addClass("active");
        if(userText === title){
            input.val("");
        }
    });

    input.blur(function(){
        ctn.removeClass("active");
    });

    input.keyup(function(){

        ctn.addClass("active-filled");
        var userText2 = input.val();
        console.log(userText2);

        setTimeout(function() {

            if(userText2 === ""){
                ctn.removeClass("active-filled");
            }

            input.blur(function(){

                if(userText2 === title){
                    ctn.removeClass("active-filled");
                    input.val("");
                }

            });

        }, 50);

    });

});