JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<div id="one"> <span class="simpletext" contenteditable="true">Text</span><br/> 
    <span class="simpletext" contenteditable="true">Text</span><br/> 
    <span class="simpletext" contenteditable="true">Text</span><br/> 
    <span class="simpletext" contenteditable="true">Text</span>
    <br/> <span class="simpletext" contenteditable="true">Text</span>
    <br/> <span class="simpletext" contenteditable="true">Text</span>
    <br/>
</div>

CSS

.simpletext {
    outline: none;
    min-width: 8px;
    display: inline-block;
}

JavaScript

var content = $("#one .simpletext");

content.focus(function () {
    if ($(this).text() === "Text") {
        $(this).text("");
    }
});
content.blur(function () {
    if ($(this).text() === "") {
        $(this).text("Text");
    }
});