JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table class="tg">
  <tr>
    <th class="tg-uhkr" colspan="4">Primary Header</th>
    <th class="tg-gr78"></th>
    <th class="tg-gr78"></th>
    <th class="tg-gr78"></th>
    <th class="tg-gr78"></th>
    <th class="tg-gr78"></th>
    <th class="tg-gr78"></th>
    <th class="tg-gr78"></th>
    <th class="tg-gr78"></th>
    <th class="tg-gr78"></th>
    <th class="tg-gr78"></th>
    <th class="tg-gr78"></th>
  </tr>
  <tr>
    <td class="tg-c57o" rowspan="20">Primary Item 1</td>
    <td class="tg-c57o" colspan="3">Sub-Header 1</td>
    <td class="tg-c57o"></td>
    <td class="tg-c57o"></td>
    <td class="tg-c57o"></td>
    <td class="tg-c57o"></td>
    <td class="tg-c57o"></td>
    <td class="tg-c57o"></td>
    <td class="tg-c57o"></td>
    <td class="tg-c57o"></td>
    <td class="tg-c57o"></td>
    <td class="tg-c57o"></td>
    <td class="tg-c57o"></td>
  </tr>
  <tr>
    <td class="tg-c57o" colspan="6">Sub-Header 2</td>
    <td class="tg-c57o" colspan="4"></td>
    <td class="tg-c57o" colspan="4"></td>
  </tr>
  <tr>
    <td class="tg-i6eq" rowspan="6">Sub-item 1</td>
    <td class="tg-nvd0" colspan="2">Title 1</td>
    <td class="tg-nvd0"></td>
    <td class="tg-nvd0"></td>
    <td class="tg-nvd0"></td>
    <td class="tg-nvd0"></td>
    <td class="tg-nvd0"></td>
    <td class="tg-nvd0"></td>
    <td class="tg-nvd0"></td>
    <td class="tg-nvd0"></td>
    <td class="tg-nvd0"></td>
    <td class="tg-nvd0"></td>
    <td class="tg-nvd0"></td>
  </tr>
  <tr>
    <td class="tg-2s1i" colspan="5">Title 2</td>
    <td class="tg-2s1i" colspan="4"></td>
    <td class="tg-2s1i" colspan="4"></td>
  </tr>
  <tr>
    <td class="tg-yzt1" colspan="2">Title 3</td>
    <td class="tg-yzt1"></td>
    <td class="tg-yzt1"></td>
    <td class="tg-yzt1"></td>
    <td class="tg-yzt1"></td>
    <td class="tg-yzt1"></td>
    <td class="tg-yzt1"></td>
    <td class="tg-yzt1"></td>
    <td...

CSS

.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yzt1{background-color:#efefef;vertical-align:top}
.tg .tg-uhkr{background-color:#ffce93}
.tg .tg-i6eq{background-color:#ffccc9;vertical-align:top}
.tg .tg-nvd0{background-color:#f8a102;vertical-align:top}
.tg .tg-gr78{background-color:#ffce93;vertical-align:top}
.tg .tg-c57o{background-color:#ecf4ff;vertical-align:top}
.tg .tg-2s1i{background-color:#fd6864;vertical-align:top}
.tg .tg-yw4l{vertical-align:top}