JSFiddle - React, Tailwind, and code Playground

HTML

<div class='timetablecontainer'>
    <table class='timetable'>
        <thead>
            <tr>
                <th class='timeheader' colspan='2'>8am</th>
                <th class='timeheader' colspan='2'>9am</th>
                <th class='timeheader' colspan='2'>10am</th>
                <th class='timeheader' colspan='2'>11am</th>
                <th class='timeheader' colspan='2'>Noon</th>
                <th class='timeheader' colspan='2'>1pm</th>
                <th class='timeheader' colspan='2'>2pm</th>
                <th class='timeheader' colspan='2'>3pm</th>
                <th class='timeheader' colspan='2'>4pm</th>
                <th class='timeheader' colspan='2'>5pm</th>
                <th class='timeheader' colspan='2'>6pm</th>
                <th class='timeheader' colspan='2'>7pm</th>
                <th class='timeheader' colspan='2'>8pm</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="day" colspan='50'>May 25 , 2014</td>
            </tr>
            <tr>
                <td class='employeeTR' colspan='4' style='border-left:solid #000;border-right:solid: #000;' title='Jack Black is out from 8:00am to 10:00am'>Jack Black</td>
                <td class='openOtime'>11 b</td>
                <td class='openEtime'>12 a</td>
                <td class='openOtime'>13 b</td>
                <td class='openEtime'>14 a</td>
                <td class='openOtime' style="background:red;">15 b</td>
                <td class='employeeTR' colspan='8' style='border-left:solid #000;border-right:solid: #000;' title='Jack Black is out from 12:30pm to 4:30pm'>Jack Black</td>
            </tr>
            <tr>
                <td class="day" colspan='50'>May 26 , 2014</td>
            </tr>
            <tr>
                <td colspan='50' class='daymessage'> <b>Nobody has been scheduled for May 26 , 2014.</b>
                </td>
            </tr>
            <tr>
                <td class="day"...

CSS

table.timetable {
    border-collapse:collapse;
    background: #dcb;
}
.timeheader {
    min-width: 100px;
    border:thin solid black;
}
.day {
    border:solid black thin;
    background:blue;
    color:white;
    width:120px;
    padding:5px;
    font-weight:bold;
    min-width:136px;
}
.daymessage {
    background:#feedba;
    padding: 10px 0 10px 100px;
}
.employeeTR {
    background: #fff;
    border: thin solid black;
    text-align:center;
    padding: 5px 0 5px 0;
    white-space:nowrap;
}
.openEtime {
    border-left: solid #888 thin;
    border-right: solid #000;
    width:100%;
}
.openOtime {
    border-right: solid #888 thin;
    width:100%;
}