JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<input type="text" id="search-field" class="search-field hidden"/>

<image src="http://www.clker.com/cliparts/Y/x/X/j/U/f/search-button-without-text-md.png" class="search-icon" id="search-icon"/>

CSS

.search-icon{
    width: 30px;
    height: 30px;
    float: left;
}
.search-field{
    height: 20px;
    float: left;
    width: 2px;
}
.hidden{
    display: none;
}
.expand{
    width: 300px;
}

JavaScript

$("#search-icon").mouseenter(function(){
    $("#search-field").animate({width: "500px"}, 500).show();
});