JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contenitors">
    <div contenteditable="true" id="mytextarea" onChange="charsLeft(this.innerHTML)" onKeyUp="charsLeft(this.innerHTML)"></div>
</div>
<div id="remaining"></div>

CSS

#endofthered{
	display:none;
}
.red {
    color:#F00;
}
#mytextarea {
    background-color:#999;
    filter:alpha(opacity=50);
    opacity:0.5;
    border: 1px #3399FF solid;
    min-height:50px;
    width:150px;
    word-wrap:break-word;
}

JavaScript

var before = 1;
	var chars = 10;
	var len = 0;
	var div = document.getElementById('mytextarea');
	var el = document.getElementById('remaining');
	el.innerHTML = chars;
	var overchars = 92; //length of the tags
	function charsLeft(val) {
	    if (typeof (val) != 'undefined') {
	        val = val.replace('<font style="background-color:#F36;" id="reddragonred">', '');
	        val = val.replace('</font>', "");
	        len = val.length;
			if (len > chars) {
	            plusvalor = val.slice(chars, len);
	            redstr = '<font style="background-color:#F36;" id="reddragonred">' + plusvalor + '</font>';
	            blackstr = val.slice(0, chars);
	            div.innerHTML = blackstr + redstr;
				var subj = document.getElementById('reddragonred');
				var cursorepos = subj.innerHTML.length;
	            var range = document.createRange();
	            var sel = window.getSelection();
				console.log(before+' '+len);
				if((before>0)&&(before<len)){
					console.log('no');
					try{
						console.log(cursorepos);
						if(cursorepos==0){
							range.setStart(subj, 0);
						}else{
							range.setStart(subj, 1);
						}
					}catch (e){
						console.log(e);
					}
					range.collapse(true);
	            	sel.removeAllRanges();
	            	sel.addRange(range);
	            	div.focus();
				}
				before=len;
	        }
        }
	    el.innerHTML = chars - len;
	}