JSFiddle - React, Tailwind, and code Playground

HTML

<div id="aa" class="editable" contentEditable="true" style=""></div>

CSS

.green {
    color: green;
}

.red {
    color: red;
}

.editable {
    width:60%; height:100px; border:1px solid #cacaca; margin-top:10px; margin-left: 10px;
}

JavaScript

$(document).ready(function() {
    $("body").on("keyup", ".editable", function(e) {
        var $this = $(this);
        if(e.keyCode==32) {//space
            var words = $this.text().split(' ');
            var lastword = $.trim(words[words.length-1]);
            var reg = /^@\S+/;
            console.log(lastword);
            //if(reg.test(lastword)) {
            		//console.log(lastword);
                //make an AJAX call for checking this word for existence
                //suppose data is returned and data==1 means green
                var data = 1;
                if(data==1) {
                    var orgtext = $this.html();
                    console.log(lastword+":"+orgtext);
                    orgtext = orgtext.replace(lastword, '<span class="green">'+lastword+'</span>');
                    console.log(orgtext);
                    $this.html(orgtext);
                }
            //}   
        }
    });

});