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>
  <!-- .events-content -->
</section>

CSS

boddy {
  background:aqua;
}
.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-wrapper {
  position: relative;
  height: 100%;
  margin: 0 40px;
  overflow: hidden;
}