JSFiddle - React, Tailwind, and code Playground

HTML

<table id="report" class="display" width="100%">
            <thead>
                <tr>
                    <th>Gorup #</th>
                    <th>Match Key</th>
                    <th>Mail Type</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
    <tbody id="groups">
                <tr>
                    <th>0</th>
                    <th>Match Key</th>
                    <th>Marketing</th>
                </tr>
                <tr>
                    <th colspan="2">
                        <table id="samples">
                          <tr><th>sample_path_01</th></tr>
                          <tr><th>sample_path_02</th></tr>
                          <tr><th>sample_path_03</th></tr>
                          <tr><th>sample_path_01</th></tr>
                          <tr><th>sample_path_02</th></tr>
                          <tr><th>sample_path_03</th></tr>
                          <tr><th>sample_path_01</th></tr>
                          <tr><th>sample_path_02</th></tr>
                          <tr><th>sample_path_03</th></tr>
                          <tr><th>sample_path_01</th></tr>
                          <tr><th>sample_path_02</th></tr>
                          <tr><th>sample_path_03</th></tr>
                        </table>
                    </th>
                    <th>
                        <li>Screenshot</li>
                    </th>
                </tr>
        <tr>
                    <th>1</th>
                    <th>Match Key</th>
                    <th>Marketing</th>
                </tr>
                <tr>
                    <th colspan="2">
                        <table id="samples">
                          <tr><th>sample_path_01</th></tr>
                          <tr><th>sample_path_02</th></tr>
                          <tr><th>sample_path_03</th></tr>
                        </table>
                    </th>
                    <th>
                  ...

CSS

table {
    margin: 10px auto;
}

tbody tr{
    height: 50px;
}

#groups > tr:nth-child(4n+1) {
    background-color: #F5F5F5;
}

#groups > tr:nth-child(4n+1) > th:nth-child(1) {
    /* Group Index*/
    width: 10%;
}

#groups > tr:nth-child(4n+1) > th:nth-child(2) {
    /* Match Key */
    width: 40%;
}

#groups > tr:nth-child(4n+1) > th:nth-child(3) {
    /* Mail Type */
    width: 50%;
}

#groups > tr:nth-child(even) {
    height: 200px;
    background-color: #FF0000;
}

#groups > tr:nth-child(even) > th:nth-child(1) {
    /* sample path*/
    height: 200px;
    width: 50%;
}

#groups > tr:nth-child(even) > th:nth-child(2) {
    /* screen shot*/
    height: 200px;
    width: 50%;
}

#samples {
    overflow: auto;
    height: 200px;
}