JSFiddle - React, Tailwind, and code Playground

HTML

<figure>
  <textarea></textarea>
  <div><p></p></div>
</figure>

CSS

figure {
    position: relative;
}
textarea {
    caret-color: black;
    color: transparent;
    position: absolute;
    z-index: 2;
    border: none;
    width: 100%;
    background: transparent;
    word-break: break-all;
    resize: none;
    font-size: 15px;
    padding: 5px 10px;
}
div {
    width: 100%;
    position: relative;
    word-break: break-all;
    font-size: 15px;
    z-index: 1;
    padding: 5px 10px;
    border: 1px solid gray;
}
p {
    margin: 0;
}
span.overed {
    color: red;
    white-space: pre-wrap;
}
span.within {
    color: black;
    white-space: pre-wrap;
}

JavaScript

$('textarea').on("input", function(){
		
		const that = $(this);
		const inp = that.val();
		const lim = 5;
		const clone = that.next('div');
		
		if( inp.length > lim ){
			const inp_base = inp.substr( 0, lim );
			const inp_over = inp.slice(lim);
			clone.html('<p><span class="within">'+inp_base+'</span>');
			clone.find('p').append('<span class="overed">'+inp_over+'</span>');
		}else{
			clone.html('<p><span class="within">'+inp+'</span>');
		}
    
});