JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search">
   <form action="#">
       <input id="q" class="autoclear blur" value="search" style="width:150px;" name="q" type="text" />
       <input value="search" type="submit"/>
   </form>
</div>

CSS

input        { color: #818588; background-color: #FFF7E0;}
.focus       { color: #535456; font-style: normal; background-color: #ffffff; }
.blur        { color: #b1b5b8; font-style: italic; background-color: #FFF7E0; }
.hovering    { background-color: #FFFFEE; }

JavaScript

$(document).ready(function(){       
     $('.autoclear').focus(function() { 
         if ($(this).val() == $(this).attr('defaultValue'))
             $(this).val("").removeClass('blur').addClass('focus'); 
     }).blur(function() { 
         if ($(this).val() == "")
             $(this).val($(this).attr('defaultValue')).removeClass('focus').addClass('blur'); 
     }).hover(function () {
            $(this).addClass('hovering');
        },function () {
            $(this).removeClass('hovering');
        });
});