JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<table>
  <thead>
    <tr>
      <th width=220>hhh</th>
      <th width=150>hhh</th>
      <th width=150>hhh</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td  width=220>bbb</td>
      <td  width=150>bbb</td>
      <td  width=150>bbb</td>
    </tr>
    <tr>
      <td  width=220>bbb</td>
      <td  width=150>bbb</td>
      <td  width=150>bbb</td>
    </tr>
    <tr>
      <td  width=220>bbb</td>
      <td  width=150>bbb</td>
      <td  width=150>bbb</td>
    </tr>
    <tr>
      <td  width=220>bbb</td>
      <td  width=150>bbb</td>
      <td  width=150>bbb</td>
    </tr>
    <tr>
      <td  width=220>bbb</td>
      <td  width=150>bbb</td>
      <td  width=150>bbb</td>
    </tr>
    <tr>
      <td  width=220>bbb</td>
      <td  width=150>bbb</td>
      <td  width=150>bbb</td>
    </tr>
    <tr>
      <td  width=220>bbb</td>
      <td  width=150>bbb</td>
      <td  width=150>bbb</td>
    </tr>
    <tr>
      <td  width=220>bbb</td>
      <td  width=150>bbb</td>
      <td  width=150>bbb</td>
    </tr>
    <tr>
      <td  width=220>bbb</td>
      <td  width=150>bbb</td>
      <td  width=150>bbb</td>
    </tr>
    <tr>
      <td  width=220>bbb</td>
      <td  width=150>bbb</td>
      <td  width=150>bbb</td>
    </tr>
    <tr>
      <td  width=220>bbb</td>
      <td  width=150>bbb</td>
      <td  width=150>bbb</td>
    </tr>
    <tr>
      <td  width=220>bbb</td>
      <td  width=150>bbb</td>
      <td  width=150>bbb</td>
    </tr>
    <tr>
      <td  width=220>bbb</td>
      <td  width=150>bbb</td>
      <td  width=150>bbb</td>
    </tr>
    <tr>
      <td  width=220>bbb</td>
      <td  width=150>bbb</td>
      <td  width=150>bbb</td>
    </tr>
  </tbody>
</table>
</div>

CSS

div {
	height: 150px;
	overflow-y: scroll;
	padding-top: 25px;
}
table {
	border-collapse: collapse;
}
thead {
	position:fixed;
	margin-top: -25px;
	background: white;
}