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(e) {
    var text = $(this).html();
    var firstAt = text.indexOf('@');
    
    if(e.keyCode === 32 && firstAt > -1) {
        var textToReplace = text.substring(firstAt, text.len);
        //alert(textToReplace);
        var newText = "<a href='#'>" + textToReplace.substring(1, textToReplace.len) + "</a>";
        //alert(newText);
        var complete = text.replace(textToReplace, newText);
        //alert(complete);
        $(this).html(complete);        
        placeCaretAtEnd($(this).get(0));
    }
});

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}