JSFiddle - React, Tailwind, and code Playground

HTML

<form id="search">
  <input type="text" id="search-input">
  <input type="submit" id="search-submit">
</form>

CSS

* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
}



#search {
  position: absolute;
  top: 50px;
  right: 50px;
  overflow: hidden;
  border-radius: 5px;
}

  #search input {
    float: left;
    height: 36px;
    transition: all .4s ease;
  }

  #search-input {
    width: 0;
    background: #d8e2e7;
  }

  #search:hover #search-input,
  #search:active #search-input,
  #search.active #search-input {
    padding: 10px 0 10px 10px;
  }

  #search.active #search-input {
    width: 180px;
  }

  #search-submit {
    width: 36px;
    cursor: pointer;
    color: transparent;
    background: url(http://work.souvel.ru/alpha/_html/images/icon-search.png) center no-repeat #e89b40;
  }

  #search:hover #search-submit,
  #search:active #search-submit {
    background-color: #46a2c8;
  }

JavaScript

var $document = $(document),
    $search = $("#search");

$search.submit(function(event) {
  if ($search.hasClass("active")) return;

  event.preventDefault();

  $search.addClass("active").find("#search-input").focus();

  $document.on("click.search-remove", function(event) {
    if (!$(event.target).closest($search).length) {
      $search.removeClass("active")
      $document.off("click.search-remove");
    }
  });
});