JSFiddle - React, Tailwind, and code Playground

HTML

<table class="agenda">
  <thead>
    <tr>
      <th></th>
      <th>August 4</th>
      <th>August 5</th>
      <th>August 6</th>
      <th>August 7</th>
      <th>August 8</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Morning</td>
      <td>Day 1 Morning</td>
      <td>Day 2 Morning</td>
      <td>Day 3 Morning</td>
      <td>Day 4 Morning</td>
      <td>Day 5 Morning</td>
    </tr>
    <tr>
      <td>Afternoon</td>
      <td>Day 1 Afternoon</td>
      <td>Day 2 Afternoon</td>
      <td>Day 3 Afternoon</td>
      <td>Day 4 Afternoon</td>
      <td>Day 5 Afternoon</td>
    </tr>
    <tr>
      <td>Evening</td>
      <td>Day 1 Evening</td>
      <td>Day 2 Evening</td>
      <td>Day 3 Evening</td>
      <td>Day 4 Evening</td>
      <td>Day 5 Evening</td>
    </tr>
  </tbody>
</table>

CSS

table.agenda {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table.agenda td,
table.agenda th {
  border: 1px solid #fff;
  padding: 8px;
  text-align: center;
}

table.agenda td {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: rgb(193, 212, 174);
  color: black;
}

th:nth-child(1) {
  background: white;
}

th:nth-child(2) {
  background: rgb(72, 151, 54);
  color: white;
}

th:nth-child(3) {
  background: rgb(84, 155, 64);
  color: white;
}

th:nth-child(4) {
  background: rgb(97, 160, 73);
  color: white;
}

th:nth-child(5) {
  background: rgb(110, 165, 82);
  color: white;
}

th:nth-child(6) {
  background: rgb(120, 169, 91);
  color: white;
}

table.agenda tr:nth-child(1) td:first-child {
  background: rgb(16, 20, 50);
  color: white;
}

table.agenda tr:nth-child(2) td:first-child {
  background: rgb(16, 69, 150);
  color: white;
}

table.agenda tr:nth-child(3) td:first-child {
  background: rgb(16, 69, 255);
  color: white;
}