JSFiddle - React, Tailwind, and code Playground

by Kiran G

HTML

<section class="cd-horizontal-timeline loaded">
  <div class="timeline">
    <div class="events-wrapper">
      <div class="events" style="width: 1800px;">
      </div>
    </div>
  </div>
</section>

CSS

.cd-horizontal-timeline.loaded {
  opacity: 1;
}

.cd-horizontal-timeline {
  opacity: 0;
  margin: 2em auto;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

@media only screen and (min-width: 1100px) .cd-horizontal-timeline {
  margin: 6em auto;
}

.cd-horizontal-timeline .timeline {
  position: relative;
  height: 100px;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}


.cd-horizontal-timeline .events {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 49px;
    height: 2px;
    background: #dfdfdf;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}