JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Type: SELECT or DELETE</h2>
<div contenteditable="true" data-placeholder="Type text"></div>

CSS

body {
    margin: 50px auto 0;
    width: 500px;
    font-family: sans-serif;
    background-color: #f1f1f1
}
[contenteditable]:empty:before {
    content: attr(data-placeholder);
    font-size: 15px;
    color: #a4a4a4;
    cursor: text;
}
[contenteditable]:focus:before {
    visibility: hidden
}
p {
    color: #fff;
    padding: 10px;
    background-color: #000;
    height: 150px
}
.sql {
    color: #4CAF50
}
div {
    border: 1px solid #ccc;
    background-color: #000;
    color: #fff;
    padding: 10px
}

JavaScript

$('div').on('keyup', function () {
       
        var search   = $(this),
            pattern  = /(SELECT|FROM|WHERE|DELETE)/gi,
            result   = search.text().replace(pattern, '<span class="sql">$1</span>');
        

      
        $(this).html(result);
        
        $('p').html(result);
        
        
    });