JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="myInput" title="hi" value="hi" />

CSS

.auto-hint{
    background:#ddd;
}

JavaScript

// Focus auto-focus fields 
$('#myInputt').focus();

// Initialize auto-hint fields 
$('#myInput').focus(function() {
    if ($(this).val() == $(this).attr('title')) {
        $(this).val('');
        $(this).removeClass('auto-hint');
    }
});

$('#myInput').blur(function() {
    if ($(this).val() == '' && $(this).attr('title') != '') {
        $(this).val($(this).attr('title'));
        $(this).addClass('auto-hint');
    }
});

$('#myInput').each(function() {
    if ($(this).attr('title') == '') {
        return;
    }
    if ($(this).val() == '') {
        $(this).val($(this).attr('title'));
    }
    else {
        $(this).removeClass('auto-hint');
    }
});