JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<div>
    
    <input type="text" id="txt" />
    <div id="search">search</div>
    <div id="bg"> </div>
    
</div>

CSS

input {
    position: relative;
    z-index: 10;
    width: 100px;
    border: none;
    background: transparent;
}

body > div {
    position: relative;
    background: #444;
}

#search {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    
}

#bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: #fff;
    width: 100px;
    height: 20px;
    opacity: 0;
    filter: alpha(opacity=0);
}

JavaScript

var txt = $('#txt');
var bg = $('#bg');
var search = $('#search');

txt.focus(function(){
    bg.animate({ opacity: 1, width: '200px' }, 200);
    search.css({ color: '#ddd' });
    txt.animate({ width: '200px' }, 200);
});

txt.focusout(function(){
    search.css({ color: '#000' });
    txt.animate({ width: '100px' }, 200);
    bg.animate({ opacity: 0, width: '100px' }, 200);
    txt.val('');
});