JSFiddle - React, Tailwind, and code Playground

HTML

Default value is Enter your name here:<br>
<input id="fname" type="text" />

JavaScript

var curval;
var fn = $('#fname');
fn.val('Enter your name here').css({"color":"lightgrey"});

fn.focus(function() {
    curval = $(this).val();
    if (curval == 'Enter your name here' || curval == '') {
        $(this).val('');
        $(this).css({"color":"black"});
    }
});

fn.blur(function() {
    curval = $(this).val();
    if (curval != 'Enter your name here' && curval != '') {
        $(this).css({"color":"black"});
    }else{
        fn.val('Enter your name here').css({"color":"lightgrey"});
    }
});