JSFiddle - React, Tailwind, and code Playground

HTML

<table class="list-table">
        <colgroup>
            <col width="36">
            <col width="262">
            <col width="91">
            <col width="86">
            <col width="95">
            <col width="126">
            <col width="149">
            <col width="93">
        </colgroup>
        <thead>
            <tr class="header-row">
                <th class="first">COLUMN</th>
                <th class="">COLUMN</th>
                <th class="">COLUMN</th>
                <th class="">COLUMN</th>
                <th class="">COLUMN</th>
                <th class="">COLUMN</th>
                <th class="">COLUMN</th>
                <th class="last">COLUMN</th>
            </tr>
        </thead>
        <tbody>
            <tr class="row odd">
                <td class="first">data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td class="last">data</td>
            </tr>
            <tr class="content-row even hidden">
                <td colspan="8" class="first last expanded">
                    <div class="expanded-table-container">
                        <table class="inner-table">
                            <colgroup>
                                <col width="83">
                                <col width="92">
                                <col width="123">
                                <col width="120">
                                <col width="177">
                                <col width="84">
                            </colgroup>
                            <thead>
                                <tr class="sort-tr">
                                    <th class="first">COLUMN</th>
                                    <th>COLUMN</th>
                                    <th>COLUMN</th>
                                    <th>COLUMN</th>
                              ...

CSS

.list-table {
    -moz-box-shadow: 5px 5px 4px #969696;
    -webkit-box-shadow: 5px 5px 4px #969696;
    box-shadow: 5px 5px 4px #969696;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#969696')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#969696');
    margin-top: 15px;
}
.list-table .header-row th {
    background-color: #515151;
    border-right: 1px solid #4a4a4a;
    border-top: 1px solid #b0b0b0;
    border-bottom: 1px solid #b0b0b0;
    color: #d8dcd7;
    font-size: 12px;
    font-weight: bold;
    padding: 14px 0 10px 12px;
    text-transform: uppercase;
    text-align: left;
}
.list-table .header-row .first {
    border-left: 1px solid #b0b0b0;
}
.list-table .header-row .last {
    border-right: 1px solid #5a5a5a;
}
.list-table .row.odd {
    background-color: #ffffff;
}
.list-table .row.even {
    background-color: #f5f4f0;
}
.list-table .row.even {
    background-color: #f5f4f0;
}
.list-table .row.even td {
    border-right: 1px solid #e9e9e5;
}
.list-table .row.even td.first {
    border-left: 1px solid #e0e0de;
}
.list-table .row.even td.last {
    border-right: 1px solid #e3e2e0;
}
.list-table .row.odd {
    background-color: #ffffff;
}
.list-table .row.odd td {
    border-right: 1px solid #f3f3f3;
}
.list-table .row.odd td.first {
    border-left: 1px solid #e3e3e3;
}
.list-table .row.odd td.last {
    border-right: 1px solid #eaeaea;
}
.list-table .row.last {
    border-bottom: 1px solid #e5e5e5;
}
.list-table td {
    padding: 10px 0 8px 12px;
}
.list-table .content-row {
    border: 1px solid #d9d9d9;
}
.list-table td.expanded {
    padding: 27px 0;
}
.expanded-table-container {
    margin: 0 auto;
    width: 695px;
}
.expanded-table-container .scrolltable {
    max-height: 318px;
    overflow-y: auto;
}
.expanded-table-container .scrolltable .inner-table {
    border-bottom: 1px solid #eae9e6;
    margin-top:...