JSFiddle - React, Tailwind, and code Playground
HTML
<div id="grid">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody><tr class="gridHeader">
<td> </td>
<td class="underline">09:00</td>
<td class="underline">10:00</td>
<td class="underline">11:00</td>
<td class="underline">12:00</td>
<td class="underline">13:00</td>
<td class="underline">14:00</td>
<td class="underline">15:00</td>
<td class="underline">16:00</td>
<td class="underline">17:00</td>
</tr>
<tr id="mon">
<td class="gridSide">Mon</td>
<td class="box" id="mon1"> </td>
<td class="box" id="mon2"> </td>
<td class="box" id="mon3"> </td>
<td class="box" id="mon4"> </td>
<td class="box" id="mon5"> </td>
<td class="box" id="mon6"> </td>
<td class="box" id="mon7"> </td>
<td class="box" id="mon8"> </td>
<td class="box" id="mon9"> </td>
</tr>
<tr id="tue">
<td class="gridSide">Tue</td>
<td class="box" id="tue1"> </td>
<td class="box" id="tue2"> </td>
<td class="box" id="tue3"> </td>
<td class="box" id="tue4"> </td>
<td class="box" id="tue5"> </td>
<td class="box" id="tue6"> </td>
<td class="box" id="tue7"> </td>
<td class="box" id="tue8"> </td>
<td class="box" id="tue9"> </td>
</tr>
<tr id="wed">
<td class="gridSide">Wed</td>
<td class="box" id="wed1"> </td>
<td class="box" id="wed2"> </td>
<td class="box" id="wed3"> </td>
<td class="box" id="wed4"> </td>
<td class="box" id="wed5"> </td>
<td class="box" id="wed6"> </td>
<td class="box" id="wed7"> </td>
<td class="box" id="wed8"> </td>
<td class="box" id="wed9"> </td>
</tr>
<tr id="thu">
<td class="gridSide">Thu</td>
<td class="box" id="thu1"> </td>
<td class="box"...
CSS
.gridHeader {
color: #000;
background-color: #EAEAEA;
font-size: 12px;
}
.gridHeader:hover {
color: #000 !important;
font-size: 12px;
}
.gridSide {
color: #000;
background-color: #EAEAEA;
font-size: 28px;
border-right: thin solid #ACACAC;
;
}
.underline {
border-bottom: thin solid #ACACAC;
}
.box {
border-bottom: thin solid #ACACAC;
border-right: thin solid #ACACAC;
font-size: 10px;
text-align: center;
color: #000 !important;
}
.box:hover {
background-color: #EAEAEA;
color: #000 !important;
}