JSFiddle - React, Tailwind, and code Playground

HTML

<form id="commentsForm">
<div id="textareaWrap">
<img src="img/caret.png" id="blinking_caret" title="blinking caret" />
<textarea id="formStory" placeholder=""></textarea>
</div>
</form>

CSS

@keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
/* Chrome, Safari, Opera */
@-webkit-keyframes blink
{
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
    #textareaWrap {
        position: relative;
    }
        #blinking_caret {
            position: absolute;
            top: 0; left: 0;
            animation: blink 1s;
            animation-iteration-count: infinite;
            -webkit-animation: blink 1s;
            -webkit-animation-iteration-count: infinite;
            z-index: 2;
        }
    #formStory {
        width: 100%;
        border: none;
        background-color: #f1f0f0;
        height: 400px;
        cursor: text;
        outline: none;
    }

JavaScript

$('#formStory').click(function(){
$('#blinking_cursor').removeClass('blinking_caret');
    $("#formStory").attr("placeholder","Start here ...");
});