JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" data-mini="false" data-theme="e" data-role="button" class="opensearch" data-icon="search" data-iconpos="right">Search</a>

<div class="search_field" style="display:none;">
    <form>
        <input name="search" class="search" value="" placeholder="Search Item...." type="text" data-theme="e" />
      <input type="submit" value="Search" data-mini="false" data-icon="search" data-iconpos="notext" data-theme="c"  />
      </form>
    </div>

CSS

.search_field {
    padding: 10px 10px 0; position:relative;
}

.search_field .ui-submit {
    bottom: -2px;
    position: absolute;
    right: 18px;
}

JavaScript

$(function() {
	 
	$( ".opensearch" ).on( 'click', tapHandler );
     $(".search").on("blur",function(){
         $('.search_field').toggle();
     });
		
	function tapHandler( event ) {
	  $('.search_field').toggle();
	   $('.search').focus();
	}
	
});