JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<div class="cont">
<div class="placeholder">Placeholder</div>
<div id="editable" contenteditable="true"></div>

</div>

CSS

#editable {
    background: rgba(0, 0, 0, 0);
    position: relative;
}

#editable.hasContent {
    background: #fff;
}

.placeholder {
    color: #ccc;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

JavaScript

document.addEventListener('DOMContentLoaded', function(){
    var editable = document.getElementById('editable');

    editable.addEventListener('input', function(){
        if (this.innerHTML === '<br>' || this.innerHTML.length === 0 || this.innerHTML === ''){
            this.className = '';
        } else {
            this.className = 'hasContent';
        }
    }, false);
    
    var event = document.createEvent('HTMLEvents');
    event.initEvent('input', true, true);
    editable.dispatchEvent(event);
}, false);