JSFiddle - React, Tailwind, and code Playground

HTML

<div id="toolBar1">
<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
<option selected>- formatting -</option>
<option value="h1">Title 1 &lt;h1&gt;</option>
<option value="h2">Title 2 &lt;h2&gt;</option>
<option value="h3">Title 3 &lt;h3&gt;</option>
<option value="h4">Title 4 &lt;h4&gt;</option>
<option value="h5">Title 5 &lt;h5&gt;</option>
<option value="h6">Subtitle &lt;h6&gt;</option>
<option value="p">Paragraph &lt;p&gt;</option>
<option value="pre">Preformatted &lt;pre&gt;</option>
</select>
<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
<option class="heading" selected>- font -</option>
<option>Arial</option>
<option>Arial Black</option>
<option>Courier New</option>
<option>Times New Roman</option>
</select>
<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
<option class="heading" selected>- size -</option>
<option value="1">Very small</option>
<option value="2">A bit small</option>
<option value="3">Normal</option>
<option value="4">Medium-large</option>
<option value="5">Big</option>
<option value="6">Very big</option>
<option value="7">Maximum</option>
</select>
<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
<option class="heading" selected>- color -</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="black">Black</option>
</select>
<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
<option class="heading" selected>- background -</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="black">Black</option>
</select>
</div>
<div id="toolBar2">
<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};"...

CSS

li font:before, li span:before, li > u:before {
 content:"•";
 display:inline-block;
 width:12px;  background:#fff;
 margin-left:-12px;
 position:relative;
 left:-.45em; 
 top:2px;
 font-size:18px; /* ems for resizing with font size */
 line-height:.9em;
 text-align:center;
}

ol li font:before, ol li span:before, ol li > u:before { 
    content:"1."; line-height:1.2em; top:0; width:auto; }
ol li > *:before { left:-.45em; }

ol li:nth-child(2) font:before, ol li:nth-child(2) > u:before,
ol li:nth-child(2) span:before { content:"2."; }
ol li:nth-child(3) font:before, ol li:nth-child(3) > u:before,
ol li:nth-child(3) span:before { content:"3."; }
ol li:nth-child(4) font:before, ol li:nth-child(4) > u:before,
ol li:nth-child(4) span:before { content:"4."; }
ol li:nth-child(5) font:before, ol li:nth-child(5) > u:before,
ol li:nth-child(5) span:before { content:"5."; }
ol li:nth-child(6) font:before, ol li:nth-child(6) > u:before,
ol li:nth-child(6) span:before { content:"6."; }
ol li:nth-child(7) font:before, ol li:nth-child(7) > u:before,
ol li:nth-child(7) span:before{ content:"7."; }
/*etc..*/

li font ~ *:before, li span ~ *:before, li u ~ *:before,
li font ~ * font:before, li span ~ * font:before,
li u ~ * font:before{ 
    content:"" !important; display:none !important; }

ol li > * > *:before { margin-left:-22px; }

.intLink {
    cursor: pointer;
}

img.intLink {
    border: 0;
}

#toolBar1 select {
    font-size:10px;
}

#textBox {
    box-sizing: border-box;
    border: 1px #000000 solid;
    height: 200px;
    overflow: scroll;
    padding: 12px;
    width: 100%;
}

JavaScript

var editor = document.getElementById("textBox");

function formatDoc(sCmd, sValue) {
    document.execCommand(sCmd, false, sValue);
    editor.focus();
};