JSFiddle - React, Tailwind, and code Playground

HTML

<table class="Timetable"> <tr>     <th></th>          <th>1:00</th>         <th>2:00</th>         <th>3:00</th>         <th>4:00</th>         <th>5:00</th>         <th>6:00</th>         <th>7:00</th>         <th>8:00</th>         <th>9:00</th>         <th>10:00</th>         <th>11:00</th>         <th>12:00</th>         <th>13:00</th>         <th>14:00</th>         <th>15:00</th>         <th>16:00</th>         <th>17:00</th>         <th>18:00</th>         <th>19:00</th>         <th>20:00</th>         <th>21:00</th>         <th>22:00</th>         <th>23:00</th> </tr>       <tr>         <th>31</th>                <td class= "bgwhite"><span class="bookingMiddle" >14266</span><br /></td><td class= "bgwhite"><span class="bookingMiddle" >14266</span><br /></td><td class= "bgwhite"><span class="bookingMiddle" >14266</span><br /></td><td class= "bgwhite"><span class="bookingEnd">14266</span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td><td><span class="bookingMiddle" ></span><br /></td>    </tr>     <tr>         <th>32</th>                <td><span class="bookingMiddle" ></span><br /></td><td><span...

CSS

table {
  border-collapse: collapse;
  margin-bottom: 12px; }
  table tr {
    border-bottom: 1px solid #ddf0ff; }
    table tr .no_border {
      border-bottom: none; }
    table tr td, table tr th {
      text-align: left;
      vertical-align: middle;
      padding: 3px 8px;
      border: none; }
    table tr th {
      text-align: center; }
    table tr .top_align {
      vertical-align: top; }
    table tr .highlighted {
      white-space: nowrap;
      vertical-align: top;
      background-color: #ddf0ff;
      border-bottom: 3px solid white;
      font-weight: bold; }
    table tr th {
      white-space: nowrap;
      background-color: #ddf0ff;
      border-bottom: 3px solid white; }
      table tr th:first-child {
        padding-left: 8px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-bottom-left-radius: 5px; }
      table tr th:last-child {
        -moz-border-radius-topright: 5px;
        -moz-border-radius-bottomright: 5px;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-right-radius: 5px; }
      table tr th a {
        color: black;
        text-decoration: underline; }
        table tr th a:hover {
          color: #105cb6; }
    table tr td.action {
      white-space: nowrap;
      width: 1px;
      text-align: right;
      border-left: 1px solid #ddf0ff; }


table.form tr
{
    border: none;
    
}

.bgred {
  background-color: red;
    color: white; }

.bggreen {
  background-color: green; }

.bgwhite {
  background-color: white; }

.bgblue {
  background-color: blue; }

.bgorange {
  background-color: orange; }
  

table.Timetable td ,  table.Timetable th 
  {
      border-spacing: 0px;
      padding: 0px;
  }

  .bookingStart, .bookingMiddle, .bookingEnd
  {
      background-color: white;
      color: Black;
      border-top: 2px solid black;
        border-bottom: 2px solid black;
  }
  .bookingStart 
  {
    ...