JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true" class="form-control" name="" onkeyup="countPublishCharactersAbout(this)" style="resize: none"></div>
<div id="about-textarea-counter"></div>

CSS

.form-control {
    height: 300px;
    width: 400px;
}
.form-control span {
    background-color: #fcc;
}

JavaScript

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();
    }
}

function countPublishCharactersAbout(element) {
    var text = element.innerText || element.textContent;
    var len = text.length;
    var count = 240 - len;
    if (count < 0) {
        $('#about-textarea-counter').html('<span class="text-danger">' + count + '</span>');
        var ok = text.slice(0, 240);
        var resto = text.slice(241);
        element.innerHTML = ok + '<span>' + resto + '</span>';
        placeCaretAtEnd(element);
    } else {
        $('#about-textarea-counter').html('<span>' + count + '</span>');
    }
}