JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-core.js"></script>
<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-textrange.js"></script>
Select something below:

<div contenteditable="true" id="area">Type here</div>

CSS

#area {
    border: solid blue 1px;
    background-color: lightgoldenrodyellow;
}

JavaScript

document.getElementById("area").onkeyup = function() {
    var sel = rangy.getSelection();
    var savedSel = sel.saveCharacterRanges(this);
    
    var userInput = this.textContent || this.innerText;
    
    var userInputLength = userInput.length;  
    var newHTML = [];
    
    for (var i=0; i<userInputLength; i++) {
        newHTML[i] = "<span style='color: red'>" + userInput.charAt(i)  + "</span>";  
    }
    
    this.innerHTML =  newHTML.join("");
    
    sel.restoreCharacterRanges(this, savedSel);
};