JSFiddle - React, Tailwind, and code Playground

HTML

<div id="strong" class="command"><b>B</b></div>
<div id="italic" class="command"><i>I</i></div>
<div id="underline" class="command"><u>U</u></div>
<div id="heading" class="command"><h1>header1</h1></div>
<div id="heading2" class="command"><h1>header2</h1></div>
<div id="remove" class="command">Remove</div>

<div id="plain" class="command">Plain</div>
<br/>
<iframe id="RTE" style="width:500px;height:200px;"></iframe>

CSS

.command
{
    min-width:64px;
    height:22px;
    color:#333;
    text-align:center;
    padding-top:4px;
    background-color:#ddd;
    border-radius:5px;
    box-shadow:inset 0px 0px 15px #ccc;
    margin:1px 1px 1px 1px;
    display:inline-block;
    overflow:hidden;
}

JavaScript

var richTextEditor=document.getElementById("RTE");
 richTextEditor.contentDocument.designMode = 'ON';
$('#strong').live('click',function(){
     richTextEditor.contentDocument.designMode = 'ON';
    richTextEditor.contentDocument.body.contentEditable=true;
   
    richTextEditor.contentDocument.execCommand('bold',false,null);
    richTextEditor.focus();
});
$('#underline').live('click',function(){
    richTextEditor.contentDocument.designMode = 'ON';
    richTextEditor.contentDocument.body.contentEditable=true;
    richTextEditor.contentDocument.execCommand('underline',false,null);
    richTextEditor.focus();
});
$('#italic').live('click',function(){
    richTextEditor.contentDocument.designMode = 'ON';
    richTextEditor.contentDocument.body.contentEditable=true;
    richTextEditor.contentDocument.execCommand('italic',false,null);
    richTextEditor.focus();
});
$('#heading').live('click',function(){
    richTextEditor.contentDocument.designMode = 'ON';
    richTextEditor.contentDocument.body.contentEditable=true;
    richTextEditor.contentDocument.execCommand('formatBlock',false,'<h1>');
    richTextEditor.focus();
});
$('#heading2').live('click',function(){
    richTextEditor.contentDocument.designMode = 'ON';
    richTextEditor.contentDocument.body.contentEditable=true;
    richTextEditor.contentDocument.execCommand('formatBlock',false,'<h2>');
    richTextEditor.focus();
});
$('#remove').live('click',function(){
    richTextEditor.contentDocument.designMode = 'ON';
    richTextEditor.contentDocument.body.contentEditable=true;
    richTextEditor.contentDocument.execCommand('removeFormat',false,null);
    richTextEditor.focus();
});
$('#plain').live('click',function(){
    richTextEditor.contentDocument.designMode = 'ON';
    richTextEditor.contentDocument.body.contentEditable=true;
    richTextEditor.contentDocument.execCommand('formatBlock',false,'<p>');
    richTextEditor.focus();
});