JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" autocomplete="on" name="form1" onSubmit="search(document.form1, frametosearch); return false">
<div class="button"></div>
<div class="overlay">
  <input type="text" placeholder="enter search and press icon again" id="searchString" />
  <input id="submitSearch" type="submit" value="" />
</div>
</form>

<div class="mainContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae 
  </div>

CSS

html,body{margin:0;padding:0;}
.button,
.overlay input[type="submit"] {
  background: url(http://s18.postimg.org/f4t3rukcl/icon.png) center center no-repeat;
  height: 50px;
  width: 50px;
  position: absolute;
  top: 50px;
  right: 50px;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(200, 200, 200, 0.8);
  display: none;
}
.overlay input[type="text"] {
  position: absolute;
  top: 50px;
  left: 0;
  height: 50px;
  font-size: 30px;
  width: -webkit-calc(100vw - 100px);
  width: calc(100vw - 100px);
  outline: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid gray;
}

.button, .overlay input[type="submit"]{
    border:none;
}
}

JavaScript

$(document).ready(function() {
  $('.button').click(function() {
    $('.overlay').css("display", "block");
    $('.button').css("display", "none");
  });

  $('#submitSearch').click(function() {
    $('.overlay').css("display", "none");
    $('.button').css("display", "block");
  });

});