JSFiddle - React, Tailwind, and code Playground

by Pedro Pinto

HTML

<div class='dth-search'>
  <form class='search' role='search' data-search='' action='' accept-charset='UTF-8' method='get'>
      <input id='query' type='search' name='query' placeholder='Search anything…' aria-label='Search'>
    <input type='submit' name='commit' value='Search'>
  </form>
</div>

CSS

.dth-search {
    background-color: #fff;
    padding: 1em;
}

.dth-search.is-active {
    background-color: yellow;
}

#query {
    min-width: 300px;
}

JavaScript

$(function(){

	$('#query')
    	.on('focus', function(event) {
    		$(event.target).closest('.dth-search').addClass('is-active');
    	})
    	.on('blur', function(event) {
        	if ($.trim(event.target.value).length < 1) {
            	$(event.target).closest('.dth-search').removeClass('is-active');
            }
    	});

});