JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.1.0/js/dataTables.fixedColumns.min.js"></script>
<script src="https://cdn.rawgit.com/ashl1/datatables-rowsgroup/v1.0.1/dataTables.rowsGroup.js"></script>
<div class="lynxPageHeader">
    
<h1>Path&nbsp;Browser&nbsp;:&nbsp;&nbsp;dhm_upf&nbsp;:&nbsp;10_syn/900_outputs_power/power_syn_dmsa</h1>

    
<h2>Created&nbsp;on&nbsp;Fri&nbsp;Oct&nbsp;09&nbsp;13:09:28&nbsp;PDT&nbsp;2015</h2>

</div>
<table id="lynx_table_1">
    <thead>
        <!-- this invisible row helps Datatables have a unique column in the header for each column in the body. -->
        <tr style="height:0px;">
            <td bgcolor="#aaaaaa"><font color="#aaaaaa"></font>
            </td>
            <td bgcolor="#aaaaaa"><font color="#aaaaaa"></font>
            </td>
            <td bgcolor="#aaaaaa"><font color="#aaaaaa"></font>
            </td>
            <td bgcolor="#aaaaaa"><font color="#aaaaaa"></font>
            </td>
            <td bgcolor="#aaaaaa"><font color="#aaaaaa"></font>
            </td>
            <td bgcolor="#aaaaaa"><font color="#aaaaaa"></font>
            </td>
        </tr>
        <tr>
            <td align="left" bgcolor="#000099"><font color="#ffffff">Scenario</font>
            </td>
            <td align="left" bgcolor="#000099"><font color="#ffffff">Type</font>
            </td>
            <td align="left" bgcolor="#000099"><font color="#ffffff">PathGroup</font>
            </td>
            <td align="center" bgcolor="#3333ff"><font color="#ffffff">Startpoint</font>
            </td>
            <td align="center" bgcolor="#3333ff"><font color="#ffffff">Endpoint</font>
            </td>
            <td align="center" bgcolor="#3333ff"><font color="#ffffff">Slack</font>
            </td>
        </tr>
    </thead>
 ...

CSS

* {
    font-family:"Lucida Sans Typewriter", monospace;
}
h1 {
    font-size: 14px;
    text-align: left;
    color:#000000;
}
h2 {
    font-size: 11px;
    text-align: left;
    color:#000000;
}
a:link {
    color: #000000;
    text-decoration: none;
}
a:active {
    color: #000000;
    text-decoration: none;
}
a:visited {
    color: #0000ff;
    text-decoration: none;
}
a:hover {
    color: #000000;
    text-decoration: none;
}
table {
    margin: 0;
    padding: 0;
    border-collapse: separate;
    /* never use collapse here */
    border-spacing: 0;
    border-style: none none solid solid;
    border-width: 1px;
    border-color: #c7c4c1;
}
table table {
    margin: 0;
    padding: 0;
    border-style: none;
    height: 100%;
    width: 100%;
}
td {
    font-size: 11px;
    margin: 0;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0;
    padding-bottom: 0;
    /* border-style: solid; */
    border-style: solid solid none none;
    border-width: 1px;
    border-color: #c7c4c1;
}
td td {
    border-style: none;
}
.c {
    margin: 0;
    /* border-style: solid; */
    border-style: solid solid none none;
    border-width: 1px;
    border-color: #c7c4c1;
    padding: 0;
}
.DTFC_LeftBodyLiner {
    overflow-x:hidden;
}

JavaScript

var oTable = null;
var firstColWidth = 0;
var bannerHeight = 0; // our h1 and h2 height, only calculated on startup
var headerHeight = 0; // height of table header, varies with rows in header
var allowance = 30; // extra space needed, found 118 good for offline debugging in firefox
var windowHeight = 0;
var isInFrame = (window.location != window.parent.location) ? true : false;
var calcWindowHeight = function () {
    if (isInFrame) {
        return window.innerHeight;
    } else {
        return window.outerHeight;
    }
};
var calcDataTableHeight = function () {
    var wHeight = windowHeight - bannerHeight - headerHeight - allowance;
    return wHeight + 'px';
};
var getFirstColumnActualWidth = function () {
    return $('#lynx_table_1 thead:first tr:first td:first').css("width");
};

$(document).ready(function () {
    bannerHeight = $('div.lynxPageHeader').height();
    headerHeight = parseInt($('#lynx_table_1 thead:first').css("height"), 10);
    firstColWidth = getFirstColumnActualWidth();
    windowHeight = calcWindowHeight();
    var dtHeight = calcDataTableHeight();
    //alert('initial ht:'+windowHeight);
    var defaultOptions = {
        "scrollX": true,
            "scrollY": "0px", // recalculated when ready
        "scrollCollapse": true, // height reduced to what is needed if table is short
        "orderCellsTop": true, // we have the phantom row in there now, so this is needed
        "fixedColumns": {
            "leftColumns": 3
        }, // make 1 larger than header_cols on multitable for the legend column
        "rowsGroup": [0, 1, 2, ], // 2 in line above means 0,1, 3 means 0,1,2, etc, unless multitable, then subtract 1 before deciding here
        "paging": false,
            "bInfo": false,
            "ordering": false, // replaces "bSort": false
        "sDom": '<"top"i>rt<"bottom"flp><"clear">', // lp instead of flp removes search filter box
        columnDefs: [{
            targets: 0,
            width: firstColWidth
        }]
 ...