JSFiddle - React, Tailwind, and code Playground

by scrimothy

HTML

<div class="fieldContainer">
    <div class="inputPlaceholder">First Name</div>
    <input type="text" id="firstName"/>
</div>

<div class="fieldContainer">
    <div class="inputPlaceholder">Last Name</div>
    <input type="text" id="lastName"/>
</div>

<div class="fieldContainer">
    <div class="inputPlaceholder">Email</div>
    <input type="email" id="email"/>
</div>

CSS

.fieldContainer {
    float: left;
    position: relative;
}

.inputPlaceholder {
    color: #999;
    font: normal 11px Arial, Helvetica, sans-serif;
    left: 5px;
    position: absolute;
    top: 4px;
    z-index: -1;
}

input {
    background: transparent;
    color: #333;
}

JavaScript

$(document).ready(function() {
    $('input').focus(function() {
        $($(this).siblings('.inputPlaceholder')[0]).hide();
    });
    $('input').blur(function() {
        if ($(this).val() === '') {
            $($(this).siblings('.inputPlaceholder')[0]).show();
        }
    });
});