JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="t" style="width: 300px; height: 50px; resize: none; position: absolute; z-index: 1; border: 1px solid #212;font-family: arial; padding: 20px; margin: 0; font-size: 12px;"></textarea>
<div style="width: 300px; height: 50px; border: 1px solid #212; font-family: arial; padding: 20px; position: absolute; z-index: 0; margin: 0; font-size: 12px;" id="input"></div>

CSS

#input {
     color: transparent;
 }
 #input b {
     text-decoration: none;
     color: transparent;
     background-color: #9aceff;
     font-weight: normal;
 }
 #t {
     background-color: transparent;
 }

JavaScript

$(document).ready(function () {
    $('#t').on('input keyup', function () {
        var str = $(this).val();
        str = str.replace(/(<.+?>)/gi, '');
        str = str.replace(/(?:\r\n|\n\r|\r|\n)/g, '<br /> ');
        str = str.replace(/(?:\s|^)#([^0-9\W\s][a-zA-z0-9]*)/g, ' <b>#$1</b>');
        $('#input').html(str);
    });
});