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>
<div id="cursorPosition">Cursor position tracked here</div>

CSS

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

JavaScript

document.getElementById("area").onkeydown = function() {
    var sel = rangy.getSelection();
    var savedSel = sel.saveCharacterRanges(this);
    
    
    var cursorPos = sel.getRangeAt(0).toCharacterRange(this).start;  
    document.getElementById("cursorPosition").innerHTML = cursorPos;
    
    
    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);
};