JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.es6.js"></script>
<h2>Text checker</h2>
Typing in "grass is green" does not color it.</br></br>
<div class="textarea" id="textarea" contenteditable="true">
   I hate blood pudding and so do you.
</div>

CSS

.red {
background-color: lightcoral;
}

.green{
background-color: lightgreen;
}

.brown{
background-color: burlywood;
}

.textarea{
    padding: 15px;
    display: inline-block;
    resize: both;
    overflow: auto;
    
    background-color: rgb(228, 228, 228);
    border: 1px solid black;
}

JavaScript

var textarea = document.getElementById("textarea");


(function (){
    var mark = function(){
		var red   = ["red", "blood"];
		var brown = ["brown", "pudding"];
		var green = ["green", "grass"];
        document.getElementById("textarea").unmark({
            done: function () {
                textarea.mark(red, {
                    separateWordSearch: false,
    								className: "red",
                    "accuracy": {
                        "value": "exactly",
                        "limiters": [",", "."]
                    }
                }),
                textarea.mark(brown, {
                    separateWordSearch: false,
    								className: "brown",
                    "accuracy": {
                        "value": "exactly",
                        "limiters": [",", "."]
                    }
                }),
                textarea.mark(green, {
                    separateWordSearch: false,
    								className: "green",
                    "accuracy": {
                        "value": "exactly",
                        "limiters": [",", "."]
                    } 
                })
            }
        })
    }
    textarea.addEventListener("input", mark);
})();