JSFiddle - React, Tailwind, and code Playground

HTML

<div class="textareaDiv" contenteditable="true">This is a div acting like a textarea</div>

CSS

body {
    padding: 20px;
}

.textareaDiv {
    border: 1px solid #cccccc;
    padding: 5px;
    border-radius: 2px;
    font-family: "Courier New", Courier, monospace;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.textareaDiv .brownText {
    color: #cc0099;
}

JavaScript

$('.textareaDiv').bind('keyup', function() {
    //check what the text is and replace certain words to be wrapped with spans with the right class name in it
});