JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<body bgColor='#333'>
    <div id='toolbar'></div>
    <div id='table'>
        <form id='tbl'>
        <input name='cols' type='text' value='3' maxlength='2'/><label for="cols">Columns</label><br/>
        <input name='rows' type='text' value='4' maxlength='2'/><label for="rows">Rows</label><br/>
        <input name='th' type='checkbox' checked='true'/><label for="th">Header</label><br/>
        <input name='tw' type='checkbox'/><label for="tw">Stretch</label><br/>
        <input name='submit' type='button' id='addTable' value='Add'/>
        </form>
    </div>
    <iframe id='msgBox' scrolling="no" >Add text</iframe>
</body>

CSS

.icon{
    display: inline-block;
    vertical-align: top;
    background-position: center center;
    background-repeat: no-repeat;
    width: 26px;
    opacity: 0.75;
    height: 20px;
    cursor: pointer;
}
#msgBox{

    margin: 0;
    width: 100%;
    min-height: 200px;
    padding: 12px;
    border: none;
    height: auto;
}
.icon:hover{
    opacity: 1;
}
#options{
    width: 220px;
    background: #555;
    color: #999;
}
.dialogue{
    width: 250px;
    height: 150px;
    background: #222;
    position: absolute;
    top: 0;
    margin: 0 auto;
    padding: 10px 25px;
    text-align: center;
    border: 1px solid #ccc;
}
.button{
    height: 24px;
    background: #ccc;
    color: #999;
    display: inline-block;
    vertical-align: top;
    margin: 5px 10px;
    width: 50px;
    padding: 0 20px;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}
.textBox{
    width: 100%;
    height: 24px;
    line-height: 24px;
    border: 1px solid #000;
    background: #555;
    margin-bottom: 10px;
}
#msgBox:focus{
    outline: none;
}
.link{
    color: #266589;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    margin: 0 5px;
}
#table{
    position: absolute;
    top: 40px;
    right: 0;
    background: #999;
    padding: 10px;
    color: #000;
    font-family: vrinda;
}
input[type="text"]{
    width: 20px;
    padding: 2px 10px;
    margin-right: 10px;
    background: #555;
    color: #999;
    border: 1px solid #000;
}

JavaScript

var tools = {
				'bold': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAQCAYAAAAI0W+oAAAAjElEQVQ4jeXSIQoCURCA4QWrYLJ6AMEqWD2DN/AYJu+xySSYBG9gtQqCYLIKewDhs0xYlo3zBPGHgceUD4ZXVX8balw6s8M0Gzrr74VJNtTEe4AlnoGti0Ct3b44hBUa3DHMhro9vv0Z5tlQ+3QjbAI7FoNiNw7oVhraBnTKhvp6Y1ESuuKAWRryU30AvDon2Jg0sc0AAAAASUVORK5CYII=)',
				'italic': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAQCAYAAAAI0W+oAAAAbElEQVQ4jc3SsQmDUABFUSshrZWQDQIOIKQSskoqIasEUrmKYBVwEsEqM5w02UD+I3eB09yq+udQo0tAPdYEdMeUgJ54JKAZtwS04VwaafApivygK94JKHbcC2MCWjAkoB1taSR23AmX4tCRvtMVYAewYq2yAAAAAElFTkSuQmCC)',
				'underline': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAQCAYAAAAI0W+oAAAAjElEQVQ4je3TsQkCQRBG4QNBuMgabMJW7OBSwcgChIss4DoQTO3ASDC1BlMjo4PPwAEvWRB2OQzuRcP+MI8ZZqvqn8ATbSLb+bCYRJNodFFdQvRAl8ha9NmSaHbBNZGdcS8l2sZ6DpgP3hv02JcSzXD05YZX1KehvJRwiXVMtsGqqGAU4rR/Jf8v5fIG4y4UzcoLKWQAAAAASUVORK5CYII=)',
				'fontColor': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAQCAYAAAAI0W+oAAAAnUlEQVQ4jeWSUQ2AMAwFkYAEJEwCEpCABCQgAQmTgoRJQMIcHD9tWCCULGwJCS9p0o+2t66vaTIE9Bzqc3qzBPgE5GtBWiACAdgkb2uARtlkBCbNa4CCbiEBEEpD3Pkuyb1cSdBlaOJAb7RmgyL3iqUgaoIVmE+xFjNFMuxyC2DQR7yFdDJoM2r0W7s3oEWGLEaNf6r5hgyXmfoPaAdIK7bxpwVYhAAAAABJRU5ErkJggg==)',
				'player': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAQCAYAAAAI0W+oAAAAoUlEQVQ4jc3PsQpBYQCG4VMmk9XkJpTJBSjX4AJMymo6ZTIppUzuQLkMk9WkTCYXoNRjIcrf4fSfv7wX8D19WfaPoYERJminQpo4e3VDPwWU+2yXAloHoFMKqBeA5pVDD2z+hhxQT4FMA4+2qFWJjAPIs2VVSAvXAggGVUCLLwgcYpEaLj9A0I2BOj8ikMdAwxLQJgaalYD2MdCqBHQs2roDRL7rpNTLvRUAAAAASUVORK5CYII=)',
				'alliance':...