JSFiddle - React, Tailwind, and code Playground

by brianlmerritt

HTML

<table>
    <tr>
        <th>
        </th>
        <th colspan=12>AM
        </th>
        <th colspan=12>PM
        </th>
    </tr>
    <tr>
        <th>
        </th>
        <th>12
        </th>
        <th>1
        </th>
        <th>2
        </th>
        <th>3
        </th>
        <th>4
        </th>
        <th>5
        </th>
        <th>6
        </th>
        <th>7
        </th>
        <th>8
        </th>
        <th>9
        </th>
        <th>10
        </th>
        <th>11
        </th>
        <th>12
        </th>
        <th>1
        </th>
        <th>2
        </th>
        <th>3
        </th>
        <th>4
        </th>
        <th>5
        </th>
        <th>6
        </th>
        <th>7
        </th>
        <th>8
        </th>
        <th>9
        </th>
        <th>10
        </th>
        <th>11
        </th>
    </tr>
    <tr>
        <th class="availability_date">Today
        </th>
        <td></td><td class="slot_available"></td><td class="slot_available"></td><td></td><td></td><td></td><td></td><td class="slot_available"></td><td class="slot_available"></td><td class="slot_available"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <th class="availability_date">Tomorrow
        </th>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <th class="availability_date">Nov 21
        </th>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <th class="availability_date">Nov 22
        </th>
       ...

CSS

table {
    border-collapse: collapse;
    white-space: nowrap;
}

table,th,td {
    border: 1px solid #666666;
}

td {
    width:30px;
}
th {
    height:30px;
    width:24px;
}

.availability_date {
    width:120px;
    height:30px;
    
}

.slot_available {
    background-color:green;
    margin:2px ;
}