JSFiddle - React, Tailwind, and code Playground

HTML

<div contentEditable="true" class="smartText">User types here...</div>

CSS

.smartText {
    border: 1px solid black;
    padding: 10px;
}
.exists {
    color: blue;
}

JavaScript

var textarea = $(".smartText");
var highlightWords = function highlightWords() {
    var original = textarea.text();
    var replaced = original.replace(/@[a-zA-Z0-9]+/g, function (username) {
        // Magic
        return "<span class='exists'>" + username + "</span>";
    });
    textarea.html(replaced);
};
var timer;

textarea.keyup(function (e) {
    clearTimeout(timer);
    if ($(this).text()) {
        timer = setTimeout(highlightWords, 1000);
    }
});