JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content" contentEditable="true">
    Text (this is node 0)
    <p id='paragraph'>Paragraph (this is node 1)</p>
    <div>Other div (this is node 2), etc..</div>
</div>

CSS

#content{
    border: 1px solid black;
    min-height: 100px;
    padding: 20px;
    color: green;
}

#placeholder{
    color: red;
}

JavaScript

$("#content").click(function() {
var el = $("#content");
var p = $("#paragraph");
var range = document.createRange();
range.selectNode(p[0].childNodes[0]);
var sel = document.getSelection();
sel.removeAllRanges();
sel.addRange(range);
});