JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

<div contenteditable="true" id="test"></div>

SCSS

$pad:10px;
div{ 
    padding:$pad; 
    border:1px solid #CCC;
    height:120px;
    position:relative; 
    
 &:before{ 
            position:relative;
            color:#999;
            content:"Write a comment..."; 
        }   
}

div:focus
{
    border-color: red;
}

div:not(:empty):before{
    display: none;
}