JSFiddle - React, Tailwind, and code Playground

HTML

<p class="class">classname = <span>ghText</span></p>

<div id="searchPanel">
     <form method="get" id="searchBox" action="somePage.php">
     <input class="ghText" type="text" name="query" value="search here"/>
     </form>
</div>

CSS

input {border:solid 1px red;}
.ghText {border:solid 1px lime;}

JavaScript

$(document).ready(function(){
        $txtField = "#searchPanel form input.ghText";
        var value = $($txtField).val();
    
        $($txtField).focus(function(){            
            if($(this).val() == value)
                $(this).val("").removeClass("ghText");
                
                $('.class span').text($(this).attr('class'));
        });
        $($txtField).blur(function(){
            if($(this).val()==""){
                $(this).val(value).addClass("ghText");
                
                $('.class span').text($(this).attr('class'));
            }
        });
});