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(/(?:\s|^)#([^0-9\W\s][a-zA-z0-9]*)/g, ' <b>#$1</b>');       
       str = str.replace(/(?:\r\n|\n\r|\r|\n)/g, '<br />');       
       $('#input').html(str);
   });
});