JSFiddle - React, Tailwind, and code Playground

HTML

<div id="editor" contenteditable="true"><br></div>

CSS

#editor {
    width: 400px;
    height: 100px;
    padding: 10px;
    background-color: #444;
    color: white;
    font-size: 14px;
    font-family: monospace;
}
  
.statement {
    color: orange;
}

JavaScript

$("#editor").on("keydown keyup", function(e) {
   
  if (e.keyCode == 188) {
    var text = $(this).text().replace(/\s/g, '').trim();
    var word = text.split(",");
    var newHTML = "";

    $.each(word, function(index, value) {
      if(value!=""){
      alert(index+" "+value);
        if (/@gmail.com\s*$/.test(value)) {
          newHTML += "<span class='statement'>" + value + "</span>";
        } else {
          newHTML += "<span class='other'>" + value + "</span>";
        }
        //newHTML += ",";
      }
    });
    $(this).html(newHTML);

    //// Set cursor postion to end of text
    
    var child = $(this).children();
    //alert(child);
    var range = document.createRange();
    //alert(range)
    var sel = window.getSelection();
    
    range.setStart(child[child.length ], 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    $(this)[0].focus();
    
  }
});