JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <title>CodePen - David Kern HTML5 Table</title>
  <!-- <style type="text/css">

</style> -->

</head>

<head>
  



</head>

<body>
  <!-- partial:index.partial.html -->
  <h1>David Kern HTML5 Table</h1>
  <table style="border-collapse:collapse;overflow:hidden;" >
    <thead>
      <tr>
        <th style="border-width:1px;border-style:solid;border-color:#000;text-align:left;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:5px;position:relative;" >ID</th>
        <th style="border-width:1px;border-style:solid;border-color:#000;text-align:left;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:5px;position:relative;" >First Name</th>
        <th style="border-width:1px;border-style:solid;border-color:#000;text-align:left;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:5px;position:relative;" >Last Name</th>
        <th style="border-width:1px;border-style:solid;border-color:#000;text-align:left;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:5px;position:relative;" >DOB</th>
        <th style="border-width:1px;border-style:solid;border-color:#000;text-align:left;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:5px;position:relative;" >Gender</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="border-width:1px;border-style:solid;border-color:#000;text-align:left;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:5px;position:relative;" >
          <label for="row1" style="cursor:pointer;position:absolute;top:0;left:0;bottom:0;width:10000px;z-index:2;" ></label>
          123
        </td>
        <td...