JSFiddle - React, Tailwind, and code Playground

by cherryflavourpez

HTML

<table id="hours">
    <tbody>
      <tr>
        <td id="tdh00">
            <div>
                <input type="checkbox" id="h00">
                <label for="h00">Label</label>
            </div>
        </td>
        <td id="tdh01">
             <div>
                <input type="checkbox" checked id="h01">
                <label for="h01">Label</label>
              </div>
        </td>
      </tr>
    </tbody>
  </table>

CSS

table { margin: 0 auto; }

td {
    width: 20px;
    height: 20px;
    border: 1px solid #333;
    padding: 0;
}

td > div { position: relative; }

input[type=checkbox] { visibility: hidden; }

label {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: red;
    text-indent: -999em;
}

input[type=checkbox]:checked  + label { background-color: #265BFA; }