JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<thead>
    <tr>
        <th>ONE</th>
        <th>TWO</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>uno</td>
        <td>dos</td>
    </tr>
    <tr>
        <td>hitotsu</td>
        <td>futatsu</td>
    </tr>
        <tr>
        <td>uno</td>
        <td>dos</td>
    </tr>
    <tr>
        <td>hitotsu</td>
        <td>futatsu</td>
    </tr>
        <tr>
        <td>uno</td>
        <td>dos</td>
    </tr>
    <tr>
        <td>hitotsu</td>
        <td>futatsu</td>
    </tr>
        <tr>
        <td>uno</td>
        <td>dos</td>
    </tr>
    <tr>
        <td>hitotsu</td>
        <td>futatsu</td>
    </tr>
        <tr>
        <td>uno</td>
        <td>dos</td>
    </tr>
    <tr>
        <td>hitotsu</td>
        <td>futatsu</td>
    </tr>
        <tr>
        <td>uno</td>
        <td>dos</td>
    </tr>
    <tr>
        <td>hitotsu</td>
        <td>futatsu</td>
    </tr>
        <tr>
        <td>uno</td>
        <td>dos</td>
    </tr>
    <tr>
        <td>hitotsu</td>
        <td>futatsu</td>
    </tr>
        <tr>
        <td>uno</td>
        <td>dos</td>
    </tr>
    <tr>
        <td>hitotsu</td>
        <td>futatsu</td>
    </tr>
        <tr>
        <td>uno</td>
        <td>dos</td>
    </tr>
    <tr>
        <td>hitotsu</td>
        <td>futatsu</td>
    </tr>
        <tr>
        <td>uno</td>
        <td>dos</td>
    </tr>
    <tr>
        <td>hitotsu</td>
        <td>futatsu</td>
    </tr>
        <tr>
        <td>uno</td>
        <td>dos</td>
    </tr>
    <tr>
        <td>hitotsu</td>
        <td>futatsu</td>
    </tr>
</tbody>
</table>

CSS

th,td{
    padding:.25em;
}

.fixed_header th,tbody.scroll_content td{
  display:block;
  float:left;
}

.table_wrap{
  border:2px dotted black;
  float:left;
  background:red;
}

.fixed_header tr{
        position:relative;
}



.scroll_content{
        display:block;
        overflow-y:scroll;
        overflow-x:show;
        height:300px;
        background:blue;
}

JavaScript

$(function() {

    scrollify($('table'), 300);
});


function scrollify(table, height) {



 

    table.find('thead').addClass('fixed_header');
    table.find('tbody').css('display', 'block').css('height', height).addClass('scroll_content');



    $('<div/>').addClass('table_wrap').appendTo(table.parent()).append(table);

















}