JSFiddle - React, Tailwind, and code Playground

by jpwo759

HTML

<div class="timeline">
<article class="timeline-item future">
<div class="timeline-desk">
    <div class="timeline-end">
    Appointment<br/>
    {{dateTime}}
    </div>
  </div>
</article>
<article class="timeline-item alt future">
  <div class="timeline-desk">
    <div class="panel">
      <div class="timeline-box">
        <span class="arrow-alt"></span>
        <span class="timeline-icon"><i class="mdi mdi-checkbox-blank-circle-outline"></i></span>
        <h4 class="">{{type}} to {{endpoint}}</h4>
        <p class="timeline-date text-muted"><small>Due to send:{{dateTime}}</small></p>
        <p>Lorem ipsum ....</p>
      </div>
    </div>
  </div>
</article>
<article class="timeline-item future">
  <div class="timeline-desk">
    <div class="panel">
      <div class="timeline-box">
        <span class="arrow"></span>
        <span class="timeline-icon"><i class="mdi mdi-checkbox-blank-circle-outline"></i></span>
        <h4 class="">{{type}} to {{endpoint}}</h4>
        <p class="timeline-date text-muted"><small>Due to send:{{dateTime}}</small></p>
        <p>Lorem ipsum ....</p>
      </div>
    </div>
  </div>
</article>
<article class="timeline-item alt future">
  <div class="timeline-desk">
    <div class="panel">
      <div class="timeline-box">
        <span class="arrow-alt"></span>
        <span class="timeline-icon"><i class="mdi mdi-checkbox-blank-circle-outline"></i></span>
        <h4 class="">{{type}} to {{endpoint}}</h4>
        <p class="timeline-date text-muted"><small>Due to send:{{dateTime}}</small></p>
        <p>Lorem ipsum ....</p>
      </div>
    </div>
  </div>
</article>

<article class="timeline-item divider"> 

</article>
<article class="timeline-item">
  <div class="timeline-desk">
    <div class="panel">
      <div class="timeline-box">
        <span class="arrow"></span>
        <span class="timeline-icon"><i class="mdi mdi-checkbox-blank-circle-outline"></i></span>
        <h4 class="">{{type}} to {{endpoint}}</h4>
        <p...

CSS

/* =============
   Timeline
============= */
.timeline {
  border-collapse: collapse;
  border-spacing: 0;
  display: table;
  margin-bottom: 50px;
  position: relative;
  table-layout: fixed;
  width: 100%;
}
.timeline .time-show {
  margin-bottom: 30px;
  margin-right: -75px;
  margin-top: 30px;
  position: relative;
}
.timeline .time-show a {
  color: #ffffff;
}
.timeline:before {
  background-color: rgba(121, 121, 121, 0.3);
  bottom: 0;
  content: "";
  left: 50%;
  position: absolute;
  top: 30px;
  width: 2px;
  z-index: 0;
}
.timeline .timeline-icon {
  -webkit-border-radius: 50%;
  background: green;
  border-radius: 50%;
  color: #ffffff;
  display: block;
  height: 20px;
  left: -54px;
  margin-top: -10px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 20px;
}
.timeline .timeline-icon i {
  color: #ffffff;
  font-size: 13px;
  margin-top: 4px;
  position: absolute;
  left: 4px;
}
.timeline .time-icon:before {
  font-size: 16px;
  margin-top: 5px;
}
h3.timeline-title {
  color: #797979;
  font-size: 20px;
  font-weight: 400;
  margin: 0 0 5px;
  text-transform: uppercase;
}
.timeline-item {
  display: table-row;
}
.timeline-item:before {
  content: "";
  display: block;
  width: 50%;
}
.timeline-item .timeline-desk .arrow {
  border-bottom: 12px solid transparent;
  border-right: 12px solid rgba(226, 226, 226, 0.3) !important;
  border-top: 12px solid transparent;
  display: block;
  height: 0;
  left: -12px;
  margin-top: -12px;
  position: absolute;
  top: 50%;
  width: 0;
}
.timeline-item .timeline-desk .timeline-box {
  padding: 20px;
}
.timeline-item .timeline-date {
  margin-bottom: 10px;
}
.timeline-item.alt:after {
  content: "";
  display: block;
  width: 50%;
}
.timeline-item.alt .timeline-desk .arrow-alt {
  border-bottom: 12px solid transparent;
  border-left: 12px solid rgba(226, 226, 226, 0.3) !important;
  border-top: 12px solid transparent;
  display: block;
  height: 0;
  left: auto;
  margin-top: -12px;
  position:...