JSFiddle - React, Tailwind, and code Playground
HTML
<div class="test" id="test" placeholder="Type something..." contenteditable="true"></div>
CSS
.test {
width: 500px;
height: 70px;
background: #f5f5f5;
border: 1px solid #ddd;
padding: 5px;
}
.test[placeholder]:empty:before {
content: attr(placeholder);
color: #555;
}
JavaScript
var target = document.querySelector('#test');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (target.textContent == '') {
target.innerHTML = '';
}
});
});
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);