JSFiddle - React, Tailwind, and code Playground

HTML

<div style="margin: 0; padding: 0; border-collapse: collapse; width: 519px; height: 100px; overflow: hidden; border: 1px solid black;">
        <table style="margin: 0; padding: 0; border-collapse: collapse; color: White; width: 517px; height: 20px; text-align: left; background-color: Blue;">
        <colgroup>
        <col width="200px"/>
        <col width="150px"/>
        <col width="150px"/>
        <col width="16px"/>
        </colgroup>
        <tbody>
        <tr style="margin: 0; padding: 0; border-collapse: collapse;">
        <th style="margin: 0; padding: 0; border-collapse: collapse;">
        Column 1
        </th>
        <th style="margin: 0; padding: 0; border-collapse: collapse;">
        Column 2
        </th>
        <th style="margin: 0; padding: 0; border-collapse: collapse;">
        Column 3
        </th>
        <th style="margin: 0; padding: 0; border-collapse: collapse;">
         
        </th>
        </tr>
        </tbody>
        </table>
        <div style="margin: 0; padding: 0; border-collapse: collapse; width: 517px;  height:77px; overflow: auto;"
        >
        <table style="margin: 0; padding: 0; border-collapse: collapse; width: 500px;">
        <colgroup>
        <col width="200px"/>
        <col width="150px"/>
        <col width="150px"/>
        </colgroup>
        <tbody style="margin: 0; padding: 0; border-collapse: collapse;">
        <tr style="margin: 0; padding: 0; border-collapse: collapse;">
        <td style="border: 1px solid lightgrey;">
        Row A-1
        </td>
        <td style="border: 1px solid lightgrey;">
        Row A-2
        </td>
        <td style="border: 1px solid lightgrey;">
        Row A-3
        </td>
        </tr>
        <tr style="margin: 0; padding: 0; border-collapse: collapse;">
        <td style="border: 1px solid lightgrey;">
        Row B-1
        </td>
        <td style="border: 1px solid lightgrey;">
        Row B-2
        </td>
        <td style="border: 1px solid...