JSFiddle - React, Tailwind, and code Playground

HTML

<div id="searchPanel">
    <form>
        <input class="ghText" value="default">
    </form>
</div>

CSS

.ghText {
    background-color: yellow;
}

JavaScript

$(document).ready(function() {
    var removeDefault = function() {
        if ($(this).val() == $(this).data("defaultValue")) {
            $(this).val("")
            .removeClass("ghText");
        }
    };
    var setDefault = function() {
        if ($(this).val() == "") {
            $(this).val($(this).data("defaultValue"))
            .addClass("ghText");
        }
    };
    $("#searchPanel form input.ghText").each(function() {
        $(this)
        .data("defaultValue", $(this).val())
        .focus(removeDefault)
        .blur(setDefault);
    });
});