JSFiddle - React, Tailwind, and code Playground

by Pranab Dey

HTML

<script src="ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="form-group">
        <input type="text" class="form-control pranab" name="Search" id='nav-search' placeholder="Search">
    </div>
    <input type="submit" name="search" value="Search" class="btn btn-default" >

CSS

.pranab{
    width: 300px;
       -webkit-transition: width 1s ease-in-out;
    -moz-transition:width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
   float:right;
}

 /*.pranab:focus{
    width: 500px;
}*/

JavaScript

$(function(){
	$(".btn").click(function(e){
  	$(".pranab").css("width","500px");
    e.stopPropagation();
  });
  $(window).click(function(){
  	$(".pranab").css("width","300px");
  });
});