JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
        <td class= "hour"/>
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />

        <td class= "hour"/>
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />

        <td class= "hour"/>
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
</tr>
    <tr><th style="max-height: 10px" rowspan="1">IoD Lounge               </th>                                               
        <td />
        <td />
        <td colspan="12" class = "setup" />
    
        <td colspan= "6" class="booking" style="background-color: #FF0000; color: #000000" onclick= " ">                       
     11:00 - 11:30 
     </td>
    <td colspan="12" class = "setup" />
    <td />
    <td />
    <td />
    <td />
    <td />
    <td />  
</tr>       
<tr>
    <th rowspan="1">Leicestershire           </th>
        <td class = "hour" colspan="12" />
        <td class = "hour" colspan="12" />
        <td class = "hour" colspan="12" />
        <td class = "hour" colspan="12" />

    </tr>

</table>

CSS

table 
{
  border-collapse: collapse;
  margin-bottom: 12px; 
}
table tr {
    border-bottom: 1px solid Green;
}
table tr td, table tr th {
    text-align: left;
    vertical-align: middle;
    padding: 3px 8px;
    border: none; 
}
table tr th {
    text-align: center; 
    white-space: nowrap;
    background-color: White;
    border-bottom: 1px solid white;
    border-left: 1px solid white; 
    color: Black;
}
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.form tr
{
    border: none;    
} 
.Timetable
{
    border: 2px solid Green;
}

table tr th {
    text-align: center; 
    white-space: nowrap;
    background-color: Red;
    border-bottom: 1px solid white;
    border-left: 1px solid white; 
    color: Red;
}

.Timetable tr
{
  /*  height: 60px;
    max-height:60px; */
}
  
table.Timetable td 
{
    border-spacing: 0px;
    padding: 0px;
    min-width: 3px;    
    width: 3px;  
    min-height: 10px;
}
  
.setup /* and breakdown */
{
    background-color: Gray;
    border: 2px solid black;
}
  
.hour
{
border-left: 1px solid Green;
    min-width: 3px;
    
}   
  
.booking
{
    text-align: center;
    background-color: white;
    color: Black;
    border: 2px solid black;
}