JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://jsfiddle.net/nod74vLs/maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
 <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">User</th>
            <th scope="col" class="text-center">Test</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of filteredItems$ | async; index as i">
            <th scope="row">1</th>
            <td>
            Test
            </td>
            <td>
              <ul class="timeline" id="timeline">
                <li class="li complete">
                  <div class="timestamp">
                    <span class="author">Abhi Sharma</span>
                    <span class="date">11/15/2014<span>
                  </div>
                  <div class="status">
                    <h4> Shift Created </h4>
                  </div>
                </li>
                <li class="li complete">
                  <div class="timestamp">
                    <span class="author">PAM Admin</span>
                    <span class="date">11/15/2014<span>
                  </div>
                  <div class="status">
                    <h4> Email Sent </h4>
                  </div>
                </li>
                <li class="li complete">
                  <div class="timestamp">
                    <span class="author">Aaron Rodgers</span>
                    <span class="date">11/15/2014<span>
                  </div>
                  <div class="status">
                    <h4> SIC Approval </h4>
                  </div>
                </li>
               
               </ul>      
            </td>
          </tr>
        </tbody>
      </table>

CSS

.timeline {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center; }

.li {
  transition: all 200ms ease-in; }

.timestamp {
  margin-bottom: 20px;
  padding: 0px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 100; }

.status {
  padding: 0px 40px;
  display: flex;
  justify-content: center;
  border-top: 2px solid #D6DCE0;
  position: relative;
  transition: all 200ms ease-in; }
  .status h4 {
    font-weight: 600; }
  .status:before {
    content: '';
    width: 25px;
    height: 25px;
    background-color: white;
    border-radius: 25px;
    border: 1px solid #ddd;
    position: absolute;
    top: -15px;
    left: 42%;
    transition: all 200ms ease-in; }

.li.complete .status {
  border-top: 2px solid #66DC71; }
  .li.complete .status:before {
    background-color: #66DC71;
    border: none;
    transition: all 200ms ease-in; }
  .li.complete .status h4 {
    color: #66DC71; }

@media (min-device-width: 320px) and (max-device-width: 700px) {
  .timeline {
    list-style-type: none;
    display: block; }
  .li {
    transition: all 200ms ease-in;
    display: flex;
    width: inherit; }
  .timestamp {
    width: 100px; }
  .status:before {
    left: -8%;
    top: 30%;
    transition: all 200ms ease-in; } }

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  font-family: 'Titillium Web', sans serif;
  color: #758D96; }

button {
  position: absolute;
  width: 100px;
  min-width: 100px;
  padding: 20px;
  margin: 20px;
  font-family: 'Titillium Web', sans serif;
  border: none;
  color: white;
  font-size: 16px;
  text-align: center; }

#toggleButton {
  position: absolute;
  left: 50px;
  top: 20px;
  background-color: #75C7F6; }