JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <body>

    <p id="content" contenteditable>
    </p>

  </body>

</html>

CSS

#content {
  border: solid 1px #555;
}

JavaScript

const content = document.getElementById('content');
content.innerHTML = 'Type text here';

function formatText(text) {
  return text.replaceAll('#', '<b>#</b>');
}

content.addEventListener('input', () => {
  content.innerHTML = formatText(content.innerText);

  let range = document.createRange();
  range.selectNodeContents(content);
  range.collapse(false);
  let selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
});