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");
var instance = new Mark("div.textarea");

var red   = ["red", "blood"];
var brown = ["brown", "pudding"];
var green = ["green", "grass"];

instance.mark(red, {
   seperateWordSearch: false,
   className: "red",
   "accuracy": {
   		"value": "exactly",
  		"limiters": [",", ".", "!", "?"]
   }
});


instance.mark(brown, {
   seperateWordSearch: false,
   className: "brown",
   "accuracy": {
  		"value": "exactly",
  		"limiters": [",", ".", "!", "?"]
   }
});

instance.mark(green, {
   seperateWordSearch: false,
   className: "green",
   "accuracy": {
  		"value": "exactly",
  		"limiters": [",", ".", "!", "?"]
   }
});

//mark is undefined
textarea.addEventListener("input", mark);