JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<table>
    <thead>
        <tr>
            <th>header1header1</th>
            <th>header2</th>
            <th>header3</th>
        </tr>
    </thead>
    <!--tbody-->
        <tr> <td>data1</td> <td>data2</td> <td>data3</td>  </tr>
        <tr> <td>data4</td> <td>data2</td> <td>data3</td>  </tr>
        <tr> <td>data5</td> <td>data2</td> <td>data3</td>  </tr>
        <tr> <td>data6</td> <td>data2</td> <td>data3</td>  </tr>
        <tr> <td>data7</td> <td>data2</td> <td>data3</td>  </tr>
        <tr> <td>data8</td> <td>data2</td> <td>data3</td>  </tr>
        <tr> <td>data9</td> <td>data2</td> <td>data3</td>  </tr>
        <tr> <td>data10</td> <td>data2</td> <td>data3</td>  </tr>
        <tr> <td>data11</td> <td>data2</td> <td>data3</td>  </tr>
        <tr> <td>data12</td> <td>data2</td> <td>data3</td>  </tr>
    <!--/tbody-->
</div>

CSS

table {
    overflow: scroll;
    display: block;    /*inline-block*/
    height: 120px;
}
thead > tr  {
    position: absolute;
    display: block;
    padding: 0;
    margin: 0;
    top: 0;
    background-color: gray;
}
tbody > tr:nth-of-type(1) {
    margin-top: 16px;
}
tbody tr {
    display: block;
}

td, th {
    width: 70px;
    border-style:solid;
    border-width:1px;
    border-color:black;
}