JSFiddle - React, Tailwind, and code Playground

by highonryan

HTML

<script src="https://use.fontawesome.com/09f43ba218.js"></script>

<p class="contacts"><span class="awesome"><i class="fa fa-search"></i></span></p>
<div class="formhide">
<div class="findersearch" style="display: none;">
	<form id="mod-finder-searchform763" action="/searchresults.html" method="get" class="form-search" role="search">
		<label for="mod-finder-searchword763" class="element-invisible findersearch">Search</label><input type="text" name="q" id="mod-finder-searchword763" class="search-query input-medium" size="25" value="" placeholder="Search ..."><button class="btn btn-primary hasTooltip search findersearch" type="submit" title="Go"><span class="icon-search icon-white"></span>Search</button>
							<input type="text" name="6da3a870259695f000419f7ec6251833" value="" style="float: left; position: absolute; z-index: 1000000; left: -10000px; top: -10000px;"></form>
</div>
</div>

CSS

div.formhide {float:none; display:inline-block;}
div.formhide form {margin:0px;}
div.findersearch {float:none; display:none;}
div.findersearch button.findersearch {display:none;}

JavaScript

$(document).ready(function() {
  $("span.awesome").click(function(event) {
    event.preventDefault();
    $("div.findersearch").toggle();
  });
});