JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<div id="search">
    <input type="text"> <i class="fa fa-search"></i>

</div>

CSS

#search {
    background: #999;
    height: 100px;
}

input {
    display: none;
}

JavaScript

$(".fa-search").click(function () {
    $("input").toggle("slow").focus();
});

$("div").focusout(function(){
	$("input").hide("slow");
});