JSFiddle - React, Tailwind, and code Playground

HTML

<textarea class="jsf" name="msg" value="Write here!" onblur="if(this.value=='') this.value='Write here!';" onfocus="if(this.value=='Write here!') this.value='';"></textarea> 
 
<div>
    Why does this value not appear, when clicked outside, it produces the effect desired, yet when loaded, no value is presented.
</div>

CSS

.jsf 
{
    color:#ccc;
    border: 1px solid #ccc;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    vertical-align:middle;
    background-color:#fdfdfd;
    border: 1px solid #E1E1E1;
    width:240px;
    height:100px;
    font-family:"Helvetica", sans-serif;
    background-color:#fff;
    padding:0;
}

div
{ width: 200px;}