JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/fixedcolumns/3.0.2/css/dataTables.fixedColumns.css">
<script src="//cdn.datatables.net/fixedcolumns/3.0.2/js/dataTables.fixedColumns.min.js"></script>
<section class="container" style="padding-bottom: 50px;">
    <div class="row">
        <div class="col-sm-6 col-md-6">
             <h3 id="Heading"></h3>

        </div>
        <div class="col-sm-6 col-md-6">
             <h3 id="Details" class="pull-right"></h3>

        </div>
    </div>
    <div id="Overview" class="alert alert-info"></div>
    <ul id="myReport" class="nav nav-tabs">
        <li><a href="#item-analysis" data-toggle="tab">Item Analysis</a>

        </li>
    </ul>
    <div id="myReportContent" class="tab-content">
        <div class="tab-pane" id="item-analysis">
            <table class="table">
                <thead>
                    <tr>
                        <th style="min-width: 102px;"><a href="#" data-help="Key">Key</a>

                        </th>
                        <th style="min-width: 250px;">Student</th>
                        <th style="min-width: 165px;">Scored</th>
                        <th style="min-width: 165px;">Status</th>
                        <th style="min-width: 50px;">Points</th>
                        <th style="min-width: 50px;">Earned</th>
                        <th style="min-width: 50px;">Missing</th>
                        <th style="min-width: 50px;">Percent</th>
                        <th style="min-width:...

CSS

/* Override classes for the tables */
        .tooltip {
            position: fixed;
        }
        div.tab-pane {
            margin-top: 5px;
        }
        table > thead > tr > th > p {
            margin: 0;
        }
        table > tbody > tr > td {
            background-color: #fff;
            vertical-align: middle;
        }
        table > tbody > tr > td.alert {
            border: 0;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            text-align: center;
        }
        @media all and (min-width: 1600px) {
            .container {
                width: 1570px;
            }
            div.tab-pane > table {
                width: 1575px;
            }
        }
        @media all and (max-width: 1599px) and (min-width: 1500px) {
            .container {
                width: 1470px;
            }
            div.tab-pane > table {
                width: 1475px;
            }
        }
        @media all and (max-width: 1499px) and (min-width: 1400px) {
            .container {
                width: 1370px;
            }
            div.tab-pane > table {
                width: 1375px;
            }
        }
        @media all and (max-width: 1399px) and (min-width: 1300px) {
            .container {
                width: 1270px;
            }
            div.tab-pane > table {
                width: 1275px;
            }
        }
        @media all and (max-width: 1299px) and (min-width: 1200px) {
            div.tab-pane > table {
                width: 1175px;
            }
        }
        @media all and (max-width: 1199px) and (min-width: 992px) {
            div.tab-pane > table {
                width: 962px;
            }
        }
        @media all and (max-width: 991px) and (min-width: 768px) {
            div.tab-pane > table {
                width: 738px;
            }
        }
        @media all and (max-width: 767px) and (min-width: 480px) {
           ...

JavaScript

var myModal = '',
    oItemAnalysisTable = $('#item-analysis').find('table'),
    oItemAnalysisDataTable,
    adjustHeight = 0;;

/*
 * Sets a Bootstrap modal with a message and title
 */
function showServerMessage(myTitle, myMessage, isClosable) {
    if (isClosable === undefined) {
        isClosable = true;
    }

    if (arguments.length === 0) {
        $('#manageError').modal('hide');
    } else {
        if (myModal !== '') {
            $('#' + myModal).modal('hide');
        }
        $('#manageError').find('.modal-title').html(myTitle);
        $('#manageError').find('.modal-body').html(myMessage);
        $('#manageError').modal('show');
    }

    if (isClosable === false) {
        $('#manageError').find('button[data-dismiss="modal"]').hide();
        $('#manageError').find('.modal-footer').hide();
    } else {
        $('#manageError').find('button[data-dismiss="modal"]').show();
        $('#manageError').find('.modal-footer').show();
    }
}

/*
 * When myModal is set and an error occured we want to show the previous modal that was being displayed
 */
$('#manageError').on('hidden.bs.modal', function () {
    if (myModal !== '') {
        $('#' + myModal).modal('show');
    }
});

/*
 * Determine if the browser can handle various functions
 */
if (window.localStorage === "undefined") {
    myModal = 'manageError';
    showServerMessage('Browser Support Issue', 'We are sorry, but your browser does not support Web Storage!  Please upgrade your current browser or try another web browser!');
}

var oItemAnalysisTable = $('#item-analysis').find('table'),
    oItemAnalysisDataTable,
    adjustHeight = 0;

function doneResizing() {
    adjustHeight = 0;
    $('section.container').children().each(function () {
        if ($(this).prop('id') !== 'myReportContent') {
            adjustHeight += $(this).outerHeight(true);
        }
    });

    adjustHeight += $($('#myReport').find('li.active > a').attr('href')).find('thead').outerHeight(true);
   ...