JSFiddle - React, Tailwind, and code Playground

HTML

<div id="inputback" class="format"></div>
<textarea id="input" class="format"></textarea>

CSS

.format
{
    font: 9pt Consolas;
    width: 500px;
}

#input { border: 1px solid black; background: transparent; z-index: 10; }

#inputback {
padding: 1px;            
    color: transparent;
    position: absolute;
    top: 0px
}
#inputback b
{
    color: black;
    background-color: #808080;
    font-weight: normal;
}

JavaScript

var textarea = document.getElementById("input");
var hashflag = 0 ;
var textlength;

textarea.onkeydown = function(e){
  textarea.style.height = "";
  textarea.style.height = textarea.scrollHeight + "px";
  textlength = textarea.value.length;
  if(e.keyCode == '51'){
        hashflag = 1;
  }
     var str = textarea.value;
     str = str.replace(/(^|\s)([#]\w*)/g, "$1<b>$2</b>");
     $('#inputback').html(str);
  if( (e.keyCode == '32') && (hashflag == 1)){
        hashflag = 0;
  }    
} 
/*
$('#textarea').keydown(function (evt) {
    
    var str = $('#textarea').val();
    str = str.replace(/(^|\s)([A-Z]\w*)/g, "$1<b>$2</b>");
    
    $('#textback').html(str);
});
*/