JSFiddle - React, Tailwind, and code Playground

by fallenreaper

HTML

<div class='container' style='z-index:-2;position:absolute; left:17px; top:11px; width:183px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div style='font-family: Arial; font-size: 11pt; '><b>Roadway Identification:</b>

                </div>
            </td>
        </tr>
    </table>
</div>
<div class='container' style='z-index:-2;position:absolute; left:47px; top:41px; width:137px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div style='font-family: Arial; font-size: 11pt; '>Road/Route Name:</div>
            </td>
        </tr>
    </table>
</div>
<div class='container' style='z-index:-2;position:absolute; left:46px; top:66px; width:100px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div style='font-family: Arial; font-size: 10pt; '>NBI Roadway:</div>
            </td>
        </tr>
    </table>
</div>
<div class='container' style='z-index:-2;position:absolute; left:47px; top:93px; width:140px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div style='font-family: Arial; font-size: 10pt; '>Position/Prefix (5a):</div>
            </td>
        </tr>
    </table>
</div>
<div class='container' style='z-index:-2;position:absolute; left:46px; top:118px; width:209px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div...

CSS

table.rootTable {
    border: solid 2px red;
}
tr.topcontent > td, tr.midcontent > td, tr.botcontent > td, tr.sbotcontent > td {
    /*
    border: solid 1px black;
    */
}
td.topmiddletd a, td.toprighttd a, td.toplefttd a, td.addtd a, td.bottd a {
    cursor:pointer;
}
a.attachedFile {
    display:auto;
    float:left;
    width:20px;
    height:20px;
    background-color: blue;
    margin-left:1px;
    margin-right:1px;
}
a.attachedFile:hover {
    background-color:red;
}
td.trtd {
    float:right;
}
td.toprighttd {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
a.slideTool {
    height: 20px;
    width: 20px;
    background-color:green;
    float:right;
    font-size:24px;
}
a.slideTool:hover {
    background-color:red;
}
a.trashcan, a.addFile {
    background-color:orange;
    width:20px;
    height:20px;
}
a.trashcan:hover {
    background-color:red;
}
span.t, a.trashcan {
    padding:2px;
    margin:2px;
}

JavaScript

var _HEIGHT_ = 400;
var _WIDTH_ = 400;
var _LIMIT_;
$(function () {
    //construct table
    //---------------------------------------------------
    var $table = $("<table class='rootTable'/>");

    $table.css({
        width: _WIDTH_
    });
    var $ttr = $("<tr class='topcontent'/>");
    $ttr.css({
        width: _WIDTH_
    });
    //top row
    var $tltd = $("<td class='toplefttd' />");
    var $tmtd = $("<td class='topmiddletd' />");
    var $trtd = $("<td class='toprighttd' />");
    $ttr.append($tltd).append($tmtd).append($trtd);
    
    //mid row
    var $mtr = $("<tr class='midcontent' />");
    $mtr.css({
        width: _WIDTH_,
        height: _HEIGHT_,
        position: 'relative'
    });
    var $mtd = $("<td class='midtd' colspan='3' />");
    $mtr.append($mtd);
    $mtd.css({
        width: _WIDTH_ - 12,
        height: _HEIGHT_ - 4,
        position: 'absolute',
        overflow: 'auto'
    });
    
    //second from Bottom Row
    var $sbtr = $("<tr class='sbotcontent' />");
    var $sbtd = $("<td class='attachmenttd' colspan='2' />");
    var $addtd = $("<td class='addtd' />");
    $sbtr.append($sbtd).append($addtd);

    //bottom row
    var $btr = $("<tr class='botcontent' />");
    var $btd = $("<td class='bottd' colspan='3' />");
    $btr.css({
        width: _WIDTH_
    });
    $btr.append($btd);
    $table.append($ttr);
    $table.append($mtr);
    $table.append($sbtr);
    $table.append($btr);
    //---------------------------------------------------

    $("body").children().css({
        zIndex: ""
    });
    var $content = $('body').children();
    //var $content = $('<div />');
    var $inner = $("<div />").css({
        position: 'absolute',
        width: '100%'
    });
    var $innerWrapper = $("<div class='outerwrapper' />").css({
        width: _WIDTH_,
        height: _HEIGHT_
    });
    $inner.append($content.clone());
    $innerWrapper.append($inner);

    $('body').html($table);

    //Title | Trashcan | Images |...