JSFiddle - React, Tailwind, and code Playground

HTML

<div id="board" class="original" contenteditable="true">
   
</div>
<div id="dummy" class="original">
   
</div>

CSS

.original {
   position:absolute;
    width: 50%;
    margin: 0 auto;
    padding: 1em;
    background: #fff;
    color: #000;
    height:100px;
    margin:2px;
    border:1px solid black;
    color:#fff;
    overflow:auto;
}

#dummy{
  color:black;
}
#board{
  z-index:11;
  background:transparent;
   color:transparent;
    caret-color: black;
}
.original span.highlighted {
    color:red;
}

JavaScript

var highLightedWord = ["select","insert","update","from","where"];
var regexFromMyArray = new RegExp(highLightedWord.join("|"), 'ig');
$('#board').keyup(function(event){
 document.getElementById('dummy').innerHTML = $('#board').html().replace(regexFromMyArray,function(str){
 return '<span class="highlighted">'+str+'</span>'
 })
})
var target = $("#dummy");
  $("#board").scroll(function() {
    target.prop("scrollTop", this.scrollTop)
          .prop("scrollLeft", this.scrollLeft);
  });