JSFiddle - React, Tailwind, and code Playground

HTML

<h4>Demo with password input:</h4>
<form>
    <div>
        <input name="email" placeholder="Enter your email address" />
    </div>
    <div>
        <input name="password" type="password" placeholder="Enter your password" />
    </div>
    <div>
        <button>Sign in</button>
    </div>
</form>
<h4>Demo with example input:</h4>
<form class="calorieTracker">
    <div>
        <label for="qty">Amount:</label>
        <input id="qty" placeholder="3/4 cup" />
    </div>
    <div>
        <label for="food">Food:</label>
        <input id="food" placeholder="Mashed potatoes" />
    </div>
    <div>
        <label for="calories">Calories:</label>
        <input id="calories" placeholder="150" />
    </div>
    <div>
        <label for="meal">Meal:</label>
        <input id="meal" placeholder="dinner" />
    </div>
    <div>
        <label></label>
        <button>Log food</button>
    </div>
</form>

CSS

input[type=text], input[placeholder], .placeholder {
    font-family: Sans-Serif;
    border: 1px solid #b2b2b2;
    border-radius: 3px;
    padding: 2px 4px;
    vertical-align: middle;
    font-size: 1em;
    line-height: 1em;
    display: inline-block;
}
.placeholder + input[placeholder].noplaceholder {
    filter: alpha(opacity=100);
    background-color: #fff;
    border-color: #b2b2b2;
}
.placeholder + input[placeholder] {
    position: relative;
    filter: alpha(opacity=50);
    border-color: #666;
}
.placeholder, label.placeholder {
    border-color: #fff;
    position: absolute;
    margin-top: 1px;
    margin-left: 0;
    top: auto;
}


body { font-family: sans-serif; }
.calorieTracker label:first-child {
    display: inline-block;
    width: 80px;
    text-align: right;
}
div { margin-bottom: 1px; }
input { width: 200px; }

JavaScript

if (!("placeholder" in document.createElement("input"))) {
    $(function() {
        $("input[placeholder]").each(function() {
            $("<label>").attr("for", this.id).addClass("placeholder").text(this.getAttribute("placeholder")).insertBefore(this);
            $(this).addClass("noplaceholder");
        }).on("keydown focus input", function() {
            $(this).addClass("noplaceholder");
        }).on("change blur", function() {
            if (!this.value) {
                $(this).removeClass("noplaceholder");
            }
        }).change();
        $("form").on("reset", function() {
            setTimeout(function() {
                $("input[placeholder]:not(:focus)").change();
            }, 0);
        });
    });
}






$(function() {
    $("form").submit(function() {
        return false;
    });
});