JSFiddle - React, Tailwind, and code Playground

HTML

<div class="editable" data-placeholder="my placeholder">
    <div contenteditable="true">my placeholder</div>
</div>

CSS

body
{
    font-family: arial;
}
.editable
{
    position: relative;
    border: 1px solid gray;
    padding: 3px;
}

.editable > div
{
    position: relative;
    z-index: 1;
}

.editable::after
{
    position: absolute;
    left: 4px;
    top: 3px;
    content: attr(data-placeholder);
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
}