JSFiddle - React, Tailwind, and code Playground

HTML

<h1 contenteditable="true">This text is editable</h1>

CSS

.red{
    color:red;
}

JavaScript

maxChars = 25;

$('h1').keypress(function(){
    if ($(this).text().trim().length > maxChars){
        $(this).html($(this).text().trim().substr(0, maxChars) +
        "<span class=red>" +
        $(this).text().trim().substr(maxChars)
        + "</span>");
    }
});