JSFiddle - React, Tailwind, and code Playground

by bodine30

HTML

<div style="width: 350px;" fixed-columns="true">
    <table class="table-grid-layout fixed">
        <colgroup>
            <col class="layout-fixed-left-col" style="width: 64px;" />
            <col class="layout-content-col" />
            <col width="0px" class="layout-fixed-right-col" />
            <col class="layout-scroll-col" style="width: 0px;" />
        </colgroup>
        <thead>
            <tr>
                <td class="title-block">
                    <div class="content-container">
                        <table class="table-grid table-grid-bordered table-grid-striped">
                            <colgroup>
                                <col style="width: 63px;" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th style="width: 50px;">Row 1 1</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </td>
                <td class="column-header-left-block">
                    <div class="content-container">
                        <table class="table-grid table-grid-bordered table-grid-striped fixed">
                            <colgroup>
                                <col style="width: 157px;" />
                                <col style="width: 157px;" />
                                <col style="width: 157px;" />
                                <col style="width: 128px;" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>Title 2</th>
                                    <th>Title 3</th>
                                    <th>Title 3</th>
                                    <th>Title 3</th>
                                </tr>
                            </thead>
                         ...

CSS

/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
 table {
    border-collapse: collapse;
    border-spacing: 0;
}
td, th {
    padding: 0;
}
/*# sourceMappingURL=normalize.css.map */
 html {
    font-size:62.5%;
}
body {
    font-size:1.4rem;
}
* {
    box-sizing:border-box;
}
table {
    max-width: 100%;
    background-color: transparent;
}
th {
    text-align: left;
}
.table {
    width: 100%;
    margin-bottom: 2rem;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #dddddd;
}
.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #dddddd;
}
.table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td {
    border-top: 0;
}
.table > tbody + tbody {
    border-top: 2px solid #dddddd;
}
.table .table {
    background-color: #424242;
}
.table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td {
    padding: 5px;
}
.table-bordered {
    border: 1px solid #dddddd;
}
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
    border: 1px solid #dddddd;
}
.table-bordered > thead > tr > th, .table-bordered > thead > tr > td {
    border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
    background-color:...