JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cheapgamessales.com/2.js"></script>
<form method='POST'>
<a id="bold" class="font-bold">B</a>
<a id="italic" class="italic">I</a>
<select id="fonts">
 <option value="Arial">Arial</option>
 <option value="Comic Sans MS">Comic Sans MS</option>
 <option value="Courier New">Courier New</option>
 <option value="Monotype Corsiva">Monotype</option>
 <option value="Tahoma">Tahoma</option>
 <option value="Times">Times</option>
</select>

<br/>
<iframe id="textEditor" style="width:500px; height:170px;">
 </iframe> 
<input type='hidden' name='comments' id='comments' />    
</form>
<input id='submit'type='submit' value='submit'/>

CSS

a {margin:10px;cursor:pointer;}
.font-bold
{
    padding:0px 10px 0px 10px;
    font-weight:bold;
}
.italic
{
    padding:0px 10px 0px 10px;
     font-style:italic;  
}
.selected
{
    background-color: orange;
}
/*************
Default Theme
*************/
/* overall */
.tablesorter {
	font: 12px/18px Arial, Sans-serif;
	color: #333;
	background-color: #fff;
	border-spacing: 0;
	text-align: left;
}

/* header */
.tablesorter th,
.tablesorter thead td {
	font: bold 12px/18px Arial, Sans-serif;
	color: #000;
	background-color: #fff;
	border-collapse: collapse;
	border-bottom: #ccc 2px solid;
	padding: 0;
}

.internal {font-weight:normal!important;}

.tablesorter tfoot th,
.tablesorter tfoot td {
	border: 0;
}
.tablesorter .header,
.tablesorter .tablesorter-header {
	background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
	background-position: center right;
        background-color:#8CB3D9;
	background-repeat: no-repeat;
	cursor: pointer;
	white-space: normal;
	padding: 4px 20px 4px 4px;
}

#table4 > thead > tr > td.tablesorter-header {color:#fff;background:#222;}

.tablesorter thead .headerSortUp,
.tablesorter thead .tablesorter-headerSortUp,
.tablesorter thead .tablesorter-headerAsc {
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
	border-bottom: red 2px solid;
}
.tablesorter thead .headerSortDown,
.tablesorter thead .tablesorter-headerSortDown,
.tablesorter thead .tablesorter-headerDesc {
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
	border-bottom: red 2px solid;
}
.tablesorter thead .sorter-false {
	background-image: none;
	cursor: default;
	padding: 4px;
}

/* tfoot */
.tablesorter tfoot .tablesorter-headerSortUp,
.tablesorter tfoot .tablesorter-headerSortDown,
.tablesorter tfoot .tablesorter-headerAsc,
.tablesorter tfoot...

JavaScript

document.getElementById('textEditor').contentWindow.  document.designMode="on";
     document.getElementById('textEditor').contentWindow.  document.close();
    $("#bold").click(function(){
       
    if($(this).hasClass("selected"))
    {
        $(this).removeClass("selected");
    }else
    {
        $(this).addClass("selected");
    }
        boldIt();
    });
    $("#italic").click(function(){
       
    if($(this).hasClass("selected"))
    {
        $(this).removeClass("selected");
    }else
    {
        $(this).addClass("selected");
    }ItalicIt();
    });
    $("#fonts").change(function(){
    changeFont($("#fonts").val());
    });

function boldIt()
    {  
       var edit = document.getElementById("textEditor").contentWindow;
       edit.focus(); 
       edit.document.execCommand("bold", false, ""); 
       edit.focus();
    }

function ItalicIt()
     {  
        var edit = document.getElementById("textEditor").contentWindow;
        edit.focus(); 
        edit.document.execCommand("italic", false, ""); 
        edit.focus();
     }

function changeFont(font)
{
    var edit = document.getElementById("textEditor").contentWindow;
        edit.focus(); 
        edit.document.execCommand("FontName", false, font); 
        edit.focus();
}

$('#textEditor').contents().find('body').css("word-wrap", "break-word");