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 }
input.typing { color:#333; }

JavaScript

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