JSFiddle - React, Tailwind, and code Playground

by ConnorM

HTML

<input type="text" name="username" id="username" placeholder="Username">
<label for="username"></label>

CSS

input{
    padding-left:20px;
}

label{
    width:15px;
    height:15px;
    background:black;
    display:block;
    position:relative;
    top:-20px;
    left:6px;
    z-index:99999;
    opacity:0.5;
}

JavaScript

$(document).ready(function() {

    $('#username').focus(function() {
        $(this).next('label').animate({opacity: '1'});
    })
    
    .blur(function() {
        $(this).next('label').animate({opacity: '.5'});
    });

});