JSFiddle - React, Tailwind, and code Playground

HTML

<textarea>test</textarea>

CSS

textarea {
    width: 400px;
    height: 400px;
    background: rgb(41, 41, 41);
    color: #FFF;
}

JavaScript

$.fn.putCursorAtEnd = function() {};
var $textarea = $("textarea");
var body = "hello";
$.fn.animateIt = function(color, text) {
    var that = $(this);
    if (text) {
        that.queue(function(next) {
            that.text(text);
            next();
        });
    }
    if (color) {
        that.animate({
            color: color
        }, 500);
    }
    return that;
};
$textarea.animateIt('rgb(41, 41, 41)')
    .animateIt('#FFF', 'Please enter your reply here')
    .delay('1000')
    .animateIt('rgb(41, 41, 41)')
    .animateIt('#a7a7a7', body)
    .queue(function(next) {
        $textarea.focus().putCursorAtEnd();
        next();
    });



/*

$textarea.animate({
    color: 'rgb(41, 41, 41)'
}, 500, function() {
    $textarea.text('Please enter your reply here').animate({
        color: 'white'
    }, 500, function() {
        $textarea.delay('1000').animate({
            color: 'rgb(41, 41, 41)'
        }, 500, function() {
            $textarea.text(body).animate({
                color: '#a7a7a7'
            }, 500).focus().putCursorAtEnd();
        });
    });
});

*/