JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<input type="search" value="foo bar">

CSS

input{margin:50px;width:140px;}

JavaScript

$('input').focus(function(){
     t = $(this);
    if(t.val()==='foo bar'){t.val('');
    }t.animate({width: '250px'},400);
}); 

$('input').blur(function(){
     t = $(this);
    if(t.val()===''){t.val('foo bar');
    }t.animate({width: '140px'},500);
});