JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<p>
    <label for="first_name">First Name</label>
    <input type="text" name="first_name">
</p>
<p>
    <label for="first_name">Last Name</label>
    <input type="text" name="last_name">
</p>

CSS

label {
    position:absolute;
    color:gray;
}
p {
    position:relative
}

JavaScript

$("p").click(function(){
    $("input",this).focus()
    $this=$("input",this)
    if($this.val()==""){
    parent=$this.width()
    label=$this.prev("label").width()
    distance=parent-label
    $this.prev("label").animate({marginLeft:"+"+distance+"px"})  
    }
})
$("p input").blur(function(){
    //$(this)=$("input",this)
    if($(this).val()=="")
    $(this).prev("label").animate({marginLeft:"0px"})
})
$('p input').keyup(function(){
    //$(this)=$("input",this)
    if($(this).val().length>5){
        $(this).prev("label").animate({opacity:"0"})
    }
    else{
        $(this).prev("label").animate({opacity:"1"})        
    }
});