JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:400px; margin:0px auto;">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th width="40%">Page Title</th>
                <th>Page Content</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td onclick="check('tab4');">Page A</td>
                <td>Content</td>
            </tr>
            <tbody id="tab4" style="display:none;" class="subpages_bg">
                <tr>
                    <td>Page A1</td>
                    <td>Content</td>
                </tr>
                <tr>
                    <td>Page A2</td>
                    <td>Content</td>
                </tr>
                <tr>
                    <td>Page A3</td>
                    <td>Content</td>
                </tr>
                <tr>
                    <td>Page A4</td>
                    <td>Content</td>
                </tr>
            </tbody>
            <tr>
                <td>Page B</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Page C</td>
                <td>Content</td>
            </tr>
            <tr>
                <td onclick="check('tab16')">Page D</td>
                <td>Content</td>
            </tr>
            <tbody id="tab16" style="display:none;" class="subpages_bg">
                <tr>
                    <td>Page D1</td>
                    <td>Content</td>
                </tr>
                <tr>
                    <td>Page D2</td>
                    <td>Content</td>
                </tr>
                <tr>
                    <td>Page D3</td>
                    <td>Content</td>
                </tr>
                <tr>
                    <td>Page D4</td>
                    <td>Content</td>
                </tr>
            </tbody>
            <tr>
                <td>Page E</td>
                <td>Content</td>
            </tr>
            <tr>
                <td onclick="check('tab11')">Page...

CSS

<style>
/* Tables */
 table {
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
.table {
    width: 100%;
    margin-bottom: 18px;
}
.table th {
    background: #818181;
    color:#FFF;
}
.table th, .table td {
    padding: 8px;
    font-size:13px;
    line-height: 18px;
    text-align: left;
    border-top: 1px solid #ddd;
}
.table th {
    font-weight: bold;
    font-size:13px;
    vertical-align: bottom;
}
.table td {
    vertical-align: top;
}
.table thead:first-child tr th, .table thead:first-child tr td {
    border-top: 0;
}
.table tbody + tbody {
    border-top: 2px solid #ddd;
}
.table-condensed th, .table-condensed td {
    padding: 4px 5px;
}
.table-bordered {
    border: 1px solid #ddd;
    border-collapse: separate;
    *border-collapse: collapsed;
    border-radius: 4px;
}
.table-bordered th + th, .table-bordered td + td, .table-bordered th + td, .table-bordered td + th {
    border-left: 1px solid #ddd;
}
.table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td {
    border-top: 0;
}
.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
.table-bordered thead:first-child tr:first-child th:last-child, .table-bordered tbody:first-child tr:first-child td:last-child {
    border-radius: 0 4px 0 0;
}
.table-bordered thead:last-child tr:last-child th:first-child, .table-bordered tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}
.table-bordered thead:last-child tr:last-child th:last-child, .table-bordered tbody:last-child tr:last-child td:last-child {
    border-radius: 0 0 4px 0;
}
.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {
    background-color: #f9f9f9;
}
.table-striped2 thead th, .table-striped2 tbody tr td:first-child {
    background-color:...

JavaScript

function check(id) {
    if (document.getElementById(id).style.display == "none") {
        document.getElementById(id).style.display = "";
    } else {
        document.getElementById(id).style.display = "none";
    }
}