JSFiddle - React, Tailwind, and code Playground

by Madhu

HTML

<div id="tablecontainer">
    <div id="tableheader">
        <table id="lefttable">
            <colgroup>
                <col style="width:10px"/>
                <col style="width:10px"/>
            </colgroup>
            <thead><tr><th>FirstName</th><th>LastName</th></tr></thead></table>
        <table id="righttable">
            <colgroup>
                <col style="width:10px"/>
                <col style="width:10px"/>
                 <col style="width:10px"/>
                <col style="width:10px"/>
            </colgroup>
<thead>
<tr>
  <th>Head1</th>
  <th>Head2</th> 
  <th>Head3</th>
  <th>Head4</th> 
</tr>
            </thead></table>
    </div>
    <div id="tablebody">
<table id="lefttable" style="width:120px">
    <colgroup>
                <col style="width:10px"/>
                <col style="width:10px"/>
            </colgroup>
 <tbody>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>   
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>    
</tr>
</tbody>
</table>
   
        <table>
            <colgroup>
                <col style="width:10px"/>
                <col style="width:10px"/>
                 <col style="width:10px"/>
                <col style="width:10px"/>
            </colgroup>
            <tbody>
<tr>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>   
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
  <tr>
  ...

CSS

#lefttable{
    float:left;
margin-right:10px;
}

#tablebody {
        overflow:scroll;
    height:200px;
}

JavaScript

$("#tablebody").on("scroll",function(){})