JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box" contenteditable="true"></div>

CSS

.box {
    width: 500px;
    height: 75px;
    background: #f5f5f5;
    border: 1px solid #333;
    padding: 10px;
}

JavaScript

$(document).on('keyup', ".box", function() {
    var text = $(this).text();
    var regexp = /\B@([^\B ]+)/;
    if (text.match(regexp)) {      
        text = text.replace(/\B@([^\B ]+)/, '<a href="#">/\B@([^\B ]+)/</a> ');
        return $(this).html(text);
    }
    return false;
});