JSFiddle - React, Tailwind, and code Playground

HTML

<table id="timeline">
  <tr>
    <td class="c0">12:00</td>
    <td class="c1">1:00</td>
    <td class="c2">2:00</td>
    <td class="3">3:00</td>
    <td class="4">4:00</td>
    <td class="5">5:00</td>
    <td class="6">6:00</td>
    <td class="7">7:00</td>
    <td class="8">8:00</td>
    <td class="9">9:00</td>
    <td class="10">10:00</td>
    <td class="11">11:00</td>
    <td class="12">12:00</td>
    <td class="13">1:00</td>
    <td class="14">2:00</td>
    <td class="15">3:00</td>
    <td class="16">4:00</td>
    <td class="17">5:00</td>
    <td class="18">6:00</td>
    <td class="19">7:00</td>
    <td class="20">8:00</td>
    <td class="21">9:00</td>
    <td class="22">10:00</td>
    <td class="23">11:00</td>
    <td class="24">12:00</td>
  </tr>

CSS

td:after {
  top: 20px;
  left: -25px;
  position: relative;
}

.c0:after {
  content: "PM";
  color: red;
}

.c1:after,
.c2:after,
.c3:after {
  content: "AM";
}