JSFiddle - React, Tailwind, and code Playground

by rickjackson

HTML

<table id="t01" style="width: 100%;" border="1">
  <tbody class="ui-sortable">
    <tr class="ui-sortable-handle">
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr class="ui-sortable-handle">
      <td style="width: 358px; background-color: lightgreen;" rowspan="4">Eve</td>
      <td style="width: 615px;">Jackson</td>
      <td style="width: 288px;">94</td>
    </tr>
    <tr>
      <td style="display: none; background-color: lightblue;">Jill</td>
      <td style="background-color: lightblue;">
        <input name="cell1" type="text">
      </td>
      <td style="background-color: lightblue;">
        <input name="cell2" type="text">
      </td>
    </tr>
    <tr>
      <td style="display: none; background-color: lightblue;">Jill</td>
      <td style="background-color: lightblue;">
        <input name="cell1" type="text">
      </td>
      <td style="background-color: lightblue;">
        <input name="cell2" type="text">
      </td>
    </tr>
    <tr>
      <td style="display: none; background-color: lightblue;">Jill</td>
      <td style="background-color: lightblue;">
        <input name="cell1" type="text">
      </td>
      <td style="background-color: lightblue;">
        <input name="cell2" type="text">
      </td>
    </tr>
    <tr class="ui-sortable-handle">
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr class="ui-sortable-handle">
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </tbody>
</table>