JSFiddle - React, Tailwind, and code Playground

by chovy

HTML

<label>
    <span>First name</span>
    <input type="text" />
</label>

CSS

label {
    display: block;
    width: 200px;
    border: 1px solid #ccc;
    position: relative;
    border-radius: 3px;
}

input {
    padding: 5px 10px;
    border: none;
    width: 200px;
    box-sizing: border-box;
}

input:focus {
    outline: none;
    border: none;
}

span {
    padding: 5px 10px;
    box-sizing: border-box;
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #999;
}

span.focus {
    color: #ddd;
}
}

JavaScript

$("input").keydown(function(e){
    $("span").fadeOut();
});

$("input").keyup(function(e){
    var val = this.value;
    
    $("span")[val.length ? 'fadeOut' : 'fadeIn']();
});

$("input").focus(function(e){
    $('span').addClass('focus');
});

$("input").blur(function(e){
    $('span').removeClass('focus');
});