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;}
.bold{
font-weight: bold;
}
.italic{
font-style: italic;
}
JavaScript
$('#textarea').keyup(function() {
$('#textarea-show').html($(this).text());
});
$('#bold_btn').on('click', function(){
$('#textarea, #textarea-show').toggleClass('bold');
});
$('#italic_btn').on('click', function(){
$('#textarea, #textarea-show').toggleClass('italic');
});