JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr>
<th width="188px">Room Number:</th>
<th width="193px">Room Charges:</th>
<th width="193px">Adult:</th>
<th width="212px">Status:</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Blah blah
</td>
Blah blah
<td>
Blah blah
</td>
<td>
Blah blah
</td>
<td>
Blah blah
</td>
</tr>
<tr>
<td>
Blah blah
</td>
Blah blah
<td>
Blah blah
</td>
<td>
Blah blah
</td>
<td>
Blah blah
</td>
</tr>
<tr>
<td>
Blah blah
</td>
Blah blah
<td>
Blah blah
</td>
<td>
Blah blah
</td>
<td>
Blah blah
</td>
</tr>
<tr>
<td>
Blah blah
</td>
Blah blah
<td>
Blah blah
</td>
<td>
Blah blah
</td>
<td>
Blah blah
</td>
</tr>
<tr>
<td>
Blah blah
</td>
Blah blah
<td>
Blah blah
</td>
<td>
Blah blah
</td>
<td>
Blah blah
</td>
</tr>
<tr>
<td>
Blah blah
</td>
Blah blah
<td>
Blah blah
</td>
<td>
Blah blah
</td>
<td>
...
CSS
tr, td, label {
font-family: arial, verdana, sans-serif;
text-align: center;
}
th {
font-weight: bold;
background-color: #380040;
text-align: center;
padding:20px 0;
color: #fff;
border-radius: 5px;
}
tr {
height: 20px;
}
td {
background-color: #444;
text-align: center;
color: #fff;
width: 180px;
padding: 10px;
}
thead {
display:block;
position: relative;
}
tbody {
height: 200px;
overflow: auto;
display: block;
}