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">Do all...
CSS
td { padding: 10px; border: 1px solid black}