JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="input" data-default="fubar">

CSS

input { color:#333; }

input:focus { color:#ccc;transition:color .2s linear 0;
              -webkit-transition:color .2s linear 0;
              -moz-transition:color .2s linear 0 }

JavaScript

$(function(){
    var input = $('input[name="input"]');
    
    input.val(input.attr('data-default'));
    
    input.on('keydown', function(){
        var that = $(this), defaulttext = that.attr('data-default');
        
        if(defaulttext == that.val()) that.val('');
    }).on('blur', function(){
        var that = $(this), defaulttext = that.attr('data-default');
        
        if(that.val() == '') that.val(defaulttext);
    });
    
    
});