JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

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

SCSS

$pad:10px;
#test { 
    padding: $pad; 
    border:1px solid #CCC;
    height:120px;
    position:relative; 
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    
    
    &:empty:focus
        {
           padding: #{($pad*2)+6} $pad; 
        }
    
    &:before { 
        position:absolute;
        color:#999;
        top: $pad;
        left: $pad;
        content: "Leave a comment"
    }   
}