JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixed-table-container complex">
      <div class="fixed-table-container-inner">
        <table>
          <thead>
            <tr>
              <th colspan="3">
                <div>First and Second</div>
              </th>
            </tr>
            <tr>
              <th>
                <div>First</div>
              </th>
              <th>
                <div>Second</div>
              </th>
              <th>
                <div>Third</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>First</td>
              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second this has longer content and so forth</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third slightly longer</td>
            </tr>
            <tr>
              <td>First</td>
              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second this has longer content and so forth</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third slightly longer</td>
            </tr>
            <tr>
              <td>First</td>
              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second this has longer content and so forth</td>
      ...

CSS

.fixed-table-container 
{
	width: 100%;
	height: 300px;
	border: 1px solid #AAA;
	border-radius:2px;
	margin: 0 auto;
	background-color: #FFF;
	position: relative;
	padding-top: 60px;
	overflow-x: hidden; 
}

.fixed-table-container-inner 
{
	overflow-x: hidden;
	overflow-y: auto;
	height: 100%;
}
 
table thead tr:first-child th div
{
	border-bottom: 1px solid #AAA;
	background-color: #DEDEDE;
	width: 100%;
	height:30px;
}

table thead tr:last-child th div {
	top: 30px;
	width: 100%
} 
table 
{
	background-color: white;
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}   
table thead tr th div
{
	position: absolute;
	top: 0;
	line-height: 30px;
	text-align: left;
	padding-left: 5px;
	margin-left: -3px;
	border-left: 1px solid #AAA;
	border-bottom: 1px solid #AAA;
	background-color: #F7F7F7;
}
table thead tr th:first-child  div
{
	border-left: none;
}