JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="item" />

CSS

.watermark {
    color: #c0c0c0;
}

JavaScript

$("#item")
    .addClass("watermark")
    .val("Watermark")
    .data('wm', true)
    .focus(function () {
        if ($(this).data('wm') === true) {
            var that = this;
            setTimeout(function () {
                that.setSelectionRange(0,0);
            }, 50);
        }
    })
    .keydown(function (evt) {
        if ($(this).data('wm') === true) {
            $(this).val($(this).val().replace('Watermark', ''));
            $(this).data('wm', false);
            $(this).removeClass('watermark');
        }       
    })
    .blur(function () {
        if ($(this).val().length === 0) {
            console.log("ran change");
            $(this)
                .addClass("watermark")
                .val("Watermark")
                .data('wm', true);

        }
    });