JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output"></div>
        <textarea></textarea>

CSS

textarea, #output {
                width: 500px;
                height: 10em;
                padding: 0.2em;
                margin: 0.2em;
                box-sizing: border-box;
                font: 13px arial;
                border: 1px solid silver;
                white-space: pre-wrap;
            }

            textarea {
                position: relative;
                -webkit-text-fill-color: transparent;
                overflow: auto;
            }

            #output {
                position: absolute;
                pointer-events: none;
                z-index: 1;
            }

            #output span:first-of-type {
                color: red;
				/*background-color: blue;*/
            }
.error{
    color:red;
}

JavaScript

$(document).ready(function(){
                $('textarea').on('input', function() {
                    $('#output').html(this.value.replace(/^(.{10})(.*)$/, '$1<span class="error" contenteditable>$2</span>'));
                });

                $('textarea').focus();
            });