JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<table>
  <tr>
    <td class="separator"></td>
    <td>OR<br/>|</td>
    <td class="separator"></td>
    <td>OR<br/>|</td>
    <td class="separator"></td>
  </tr>
  <!--Insert arrow image-->
  <tr style="background-image: url('')">
    <td></td>
    <td>
      <div class="status-bar"></div>
    </td>
    <td><div class="status-bar"></div></td>
    <td></td>
    <td></td>

  </tr>
  <tr>
    <td></td>
    <td>|<br/>12-May-20</td>
    <td></td>
    <td>|<br/>12-May-20</td>
    <td></td>
  </tr>
</table>

CSS

td {
  /* border: 1px black solid; */
  text-align: center;
  font-size: 10pt;
}

.separator {
  width: 20px;
  height: 20px;
}

.content {
  width: 70px;
}

.status-bar {
  width: 10px;
  height: 20px;
  background-color: green;
  border-radius: 2px;
  margin: auto;
}