JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="editor"></textarea>
<div id="editado"></div>

CSS

*{
    margin:0;
    padding:0;    
}

#editor, #editado {
width:200px; height:200px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
    
}

#editado{
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    border:1px solid red;
    
}

#editor{
zoom: 1;
opacity: 0;
filter: alpha(opacity = 0);
z-index:200;
}

.hl {
    color:#F00;
    font-weight:bold;
    
}

JavaScript

$(function(){
    var marcar = ["metallica","rammstein","ac/dc"];
    $("#editor").keyup(function(){
        var contenido = this.value;
        var palabras = contenido.split(" ")
            for(i = 0; i<palabras.length ; i++){
            if($.inArray(palabras[i], marcar) != -1){
                var search_for = new RegExp(palabras[i], 'gi');
                contenido = String(contenido).replace(search_for,"<span class='hl'>" + palabras[i] + "</span>")
            }
        }
        $("#editado").html(contenido)
    })    
})