JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result" contenteditable="true">
            </div>

CSS

#result {
            position: absolute;
            top: 8px;
            left: 8px;
            background: transparent;
            color: #000;
            font: normal 14px Arial;
            width: 213px;
            height: 60px;
            border: solid 1px #1c94c4;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 10px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
        }
        #result a {
            display: inline-block;
            color: #000;
            text-decoration: none;
            font: normal 14px Arial;
            background: #d8dfea;
            background: -webkit-gradient(linear, center top, center bottom, from(#dce6f8), to(#bdcff1));
            background: -webkit-linear-gradient(#dce6f8, #bdcff1);
            -webkit-border-radius: 2px;
            -webkit-box-shadow: 0 0 0 1px #a3bcea;
            font-weight: normal;
        }

JavaScript

$(
    function() {
        $('#result').on('keyup',
            function(evt) {
                var regExpForUserGroup = /(^|\s)(@|#)(\w+)/ig;
                var valueOfTextarea = $(this).text();
                var valueOfQuery;
                var stripTag = valueOfTextarea.replace(/\n/g, "").replace(/<\/?[^>]+(>|$)/g, " ");

                if ( regExpForUserGroup.test(valueOfTextarea) ) {
                    valueOfQuery = stripTag.replace(regExpForUserGroup, "$1<a href=\"http://www.twitter.com/$3\">$2$3</a>");
                    $('#result').html(
                        valueOfQuery
                    );
                }

            }
        );
    }
);