JSFiddle - React, Tailwind, and code Playground

HTML

<table id="headerTable" class="table tablesorter tablesorter-default" role="grid" aria-describedby="headerTable_pager_info">
        <thead>
        <tr role="row" class="tablesorter-headerRow">
            <th style="display: none; -webkit-user-select: none;" data-column="0" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="headerTable" unselectable="on" aria-sort="none" aria-label=": No sort applied, activate to apply an ascending sort"><div class="tablesorter-header-inner"></div></th>
            <!--<th style="width: 33px; padding:0;">ID</th>
            <th style="width: 73px; padding:0;">Location</th>
            <th style="width: 95px; padding:0;">Reported By</th>
            <th style="width: 225px; padding:0;">Comment</th>
            <th style="width: 225px; padding:0;">Additional Information</th>
            <th style="width: 120px; padding:0;">Date Reported</th>
            <th style="width: 80px; padding:0;">TC Key</th>
            <th style="width: 80px; padding:0;">Loc Acct Num</th>
            <th style="width: 120px; padding:0;">TC Date</th>
            <th style="width: 120px; padding:0;">WorkedID</th>
            <th style="width: 120px; padding:0;">TC Type</th>
            <th style="width: 120px; padding:0;">Corrected TC Type</th>
            <th style="width: 120px; padding:0;">Accepted By</th>
            <th style="width: 120px; padding:0;">Date Updated</th>
            <th style="width: 120px; padding:0;">Status</th>
            <th style="width: 120px; padding:0;">Referred By</th>
            <th style="width: 120px; padding:0;">New Comment</th>
            <th style="width: 120px; padding:0;">Last Response By</th>-->
            <th style="width: 35px; padding: 0px; -webkit-user-select: none;" data-column="1" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false"...

CSS

table {
            width: 100%;
        }

        /*thead, tbody, tr, td, th { 
            display: block; 

        }*/

        tr:after {
            content: ' ';
            display: block;
            visibility: hidden;
            clear: both;
        }

        thead th {
            /*height: 30px;*/

            /*text-align: left;*/
        }

        tbody {
            height: 620px;
            /*overflow: auto;*/
            overflow-y: auto;
            overflow-x: auto;
        }

        thead {
            /* fallback */
        }


        tbody td, thead th {
            width: 100px;
            /*float: left;*/
        }

         table tbody, table thead
        {
            display: block; 
        }

        .active {
            font-weight: bold;
            color:aqua;
        }
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,700);@import url(http://fonts.googleapis.com/css?family=Anonymous+Pro:400,700);*,:after,:before,:focus{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*{font-family:Roboto,sans-serif;font-size:10pt;font-weight:300}.code-panel pre *{font-family:'Anonymous Pro',monospace}b,h1,h2,h3,h4,h5,h6{font-weight:700}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.17em}h5{font-size:.83em}h6{font-size:.75em}.center{margin:0 auto}.container{margin:0 auto;max-width:1024px;padding:0 10px}.text-center{text-align:center}.text-right{text-align:right}.padding{padding:4px 8px}.panel{border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;padding:4px 8px;border:1px solid silver;background:#fff}.panel-1-2{border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;border:1px solid silver;background:#fff;width:50%;margin:0 auto;padding:20px}.code-panel pre{border-left:5px solid #006ea9;overflow:hidden}pre ::-webkit-scrollbar{display:none}.code-panel pre code{border-radius:0 2px 2px 0;-moz-border-radius:2px;-webkit-border-radius:0 2px 2px...