JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myta" autofocus="" contenteditable="true"></div>

CSS

div {
    width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 1rem;
    padding: 2px;
    border: 1px solid #000;
    resize: none;
    height: 21px;
}
.red { color: #f00 }
.green { color: #0f0 }

JavaScript

var myta = document.getElementById('myta');
function updateDiv() {
    var fc;
    var text = myta.innerText || myta.textContent;
    while (fc = myta.firstChild) myta.removeChild(fc);
    for (var i = 0; i < text.length; i++) {
        var span = document.createElement('span');
        span.className = Math.random() < 0.5 ? 'green' : 'red';
        span.appendChild(document.createTextNode(text[i]));
        myta.appendChild(span);
    }
    placeCaretAtEnd(myta);
};
myta.addEventListener('input', updateDiv);

// This function move the caret at the end
function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
        && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}