JSFiddle - React, Tailwind, and code Playground

HTML

<button id='bold_btn'>B</button>
<button id='italic_btn'>I</button>
<div id="textarea" contenteditable></div>
<div id="textarea-show"></div>

CSS

#textarea {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #555;
  font-size: 14px;
  height: 34px;
  width: 450px;
}
#textarea-show {
  font-size: 2rem;
  color: #666;
  height: 50px;
  border: 1px solid #ccc;
  width: 450px;
}

JavaScript

$('#textarea').keyup(function() {
  $('#textarea-show').html($(this).text());
});

$('#bold_btn').on('click', function() {
  document.execCommand('bold');
  var text = document.getElementById('textarea').innerHTML;
  $('#textarea-show').html(text);
});
$('#italic_btn').on('click', function() {
  document.execCommand('italic');
  var text = document.getElementById('textarea').innerHTML;
  $('#textarea-show').html(text);
});