JSFiddle - React, Tailwind, and code Playground

HTML

<input name="email" id="target" type="text" placeholder="email@domain.com"/>
<label id="email-label" for="email"></label>

CSS

body {
    padding:10px;
}
input {
    font-family:Courier;
    padding:8px;
    font-size:16px;
    width:50%;
}

input::-webkit-input-placeholder {
    color:    #ddd;
    font-style:italic;
}
input:-moz-placeholder {
    color:    #ddd;
    font-style:italic;
}

input span {
    color:red;
}

label {
    color:#ddd;
    font-family:Courier;
    font-size:16px;
    z-index:20;
    font-style:italic;
}

JavaScript

$(function() {
    return $("#target").keyup(function(e) {
        var code, el, f, offset, p, temp, w;
        el = $(this);
        p = el.attr("placeholder");
        temp = p.split("email")[1];

        if (el.val().indexOf("@") > -1 && el.val().indexOf(".") > -1 && el.val().lastIndexOf(".") > el.val().indexOf("@")) {
            temp = "";
        }

        code = e.keyCode;

        if (code === 8 && el.val().length < 1) {
            return $("#email-label").html("").css("margin-left", "0px");
        }

        if (code == 64) {
            temp = (temp === "" ? "" : temp.split("@")[1]);
        }
        if (el.val().indexOf("@") > -1) {
            temp = (temp === "" ? "" : "." + temp.split(".")[1]);
        }
        if (code === 46) {
            temp = "";
        }

        offset = el.val().length;
        w = el.width();
        f = 9.5;
        offset = -w + offset * f;
        offset > 0 ? offset = 0 : offset
        return $("#email-label").html(temp).css("margin-left", offset + "px");
    });
});