JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search">
    <form action="#">
        <input id="q" class="autoclear blur" value="search" 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; }
input:hover  { background-color: #FFFFEE; }
#q           { width:150px; }

JavaScript

$( '.autoclear' ).
    focus( function () {
        if ( this.value === this.defaultValue ) {
            this.value = '';
            $( this ).removeClass( 'blur' ).addClass( 'focus' );
        }
    }).
    blur( function () {
        if ( this.value === '' ) { 
            this.value = this.defaultValue;
            $( this ).removeClass( 'focus' ).addClass( 'blur' );
        }
    });