JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<script>
                function red(){
    {       
        var selection = window.getSelection().getRangeAt(0);
        if(window.getSelection().baseNode.parentNode.id != "foo") return;
        var selectedText = selection.extractContents();
        var span = document.createElement("span");
        span.style.color = "red";
        span.appendChild(selectedText);
        selection.insertNode(span);
    }
    }

</script>
<body>
<button onclick="red()">Click to make highlighted text red.</button>
<div id="foo" style="width:30em; height:30em; border-style:solid; border-color:black;" contenteditable="true"></div>
This will become red as well
<br>
<br>
<br>
<br>
<br>
</body>