JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<table class="scroll">
			<thead>
				<th>
					<strong>ID</strong>
				</th>
				<th>
					Column 1
				</th>
				<th>
					Longer column 2
				</th>
				<th>
					Column 3 that is longer
				</th>
			</thead>
			<tbody>
				<tr>
					<td>ID</td>
					<td>Data</td>
					<td>DataDataDataData</td>
					<td>DataDataDataDataDataDataDataData</td>
				</tr>
        <tr>
					<td>ID</td>
					<td>Data</td>
					<td>DataDataDataData</td>
					<td>DataDataDataDataDataDataDataData</td>
				</tr>
        <tr>
					<td>ID</td>
					<td>Data</td>
					<td>DataDataDataData</td>
					<td>DataDataDataDataDataDataDataData</td>
				</tr>
        <tr>
					<td>ID</td>
					<td>Data</td>
					<td>DataDataDataData</td>
					<td>DataDataDataDataDataDataDataData</td>
				</tr>
        <tr>
					<td>ID</td>
					<td>Data</td>
					<td>DataDataDataData</td>
					<td>DataDataDataDataDataDataDataData</td>
				</tr>
        <tr>
					<td>ID</td>
					<td>Data</td>
					<td>DataDataDataData</td>
					<td>DataDataDataDataDataDataDataData</td>
				</tr>
        <tr>
					<td>ID</td>
					<td>Data</td>
					<td>DataDataDataData</td>
					<td>DataDataDataDataDataDataDataData</td>
				</tr>
        <tr>
					<td>ID</td>
					<td>Data</td>
					<td>DataDataDataData</td>
					<td>DataDataDataDataDataDataDataData</td>
				</tr>
        <tr>
					<td>ID</td>
					<td>Data</td>
					<td>DataDataDataData</td>
					<td>DataDataDataDataDataDataDataData</td>
				</tr>
        <tr>
					<td>ID</td>
					<td>Data</td>
					<td>DataDataDataData</td>
					<td>DataDataDataDataDataDataDataData</td>
				</tr>
        <tr>
					<td>ID</td>
					<td>Data</td>
					<td>DataDataDataData</td>
					<td>DataDataDataDataDataDataDataData</td>
				</tr>
        <tr>
					<td>ID</td>
					<td>Data</td>
					<td>DataDataDataData</td>
					<td>DataDataDataDataDataDataDataData</td>
				</tr>
       ...

CSS

div.sticky-table-head {
    overflow-y: auto;
    overflow-x: auto;
    height: 100%;
    width: 100%;
}

.scroll{
    margin-left: auto;
    margin-right: auto;
}

.scroll th {
    position: sticky;
    top: 0;
    background: lightblue;
}

.scroll td {
  text-align: center;
  padding: 5px;
  background: lightgreen;
}