JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="timeline_title"><h2>This is an example timeline</h2></div>

<div class="timeline">
  <div class="container left">
    <div class="content">
      <h3>Start of timeline</h3>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto.</p>
      <p>Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h3>Second step of the timeline which comes after the first</h3>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="container left">
    <div class="content">
      <h3>The third step in the timeline</h3>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h3>Fourth step</h3>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="container left">
    <div class="content">
      <h3>Fifth step</h3>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h3>The final step in the timeline</h3>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue...

CSS

body {margin:20px 0;}

.timeline div {box-sizing: border-box;}

/* The actual timeline (the vertical ruler) */
.timeline, .timeline_title {font-family: Arial;
background-color: #003162;
  position: relative;
  max-width: 690px;
  margin: 0 auto;
}
.timeline_title {border-radius:10px 10px 0 0; }

.timeline_title h2 {font-size:20px;line-height:30px;margin:0;color:#ffffff;text-align:center;padding:20px 0;}
.timeline h3 {font-size:18px;line-height:22px;margin:12px 0 0 0;color:#405C9E;}
.timeline p {font-size:16px;line-height:22px;margin:10px 0;}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 30px;
  bottom: 10px;
  left: 50%;
  margin-left: -3px;
  border-radius:50px;
}

/* Container around content */
.timeline .container {

  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.timeline .container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #86B559;
  top: 15px;
  border-radius: 50%;
  z-index: 2;
}


/* Place the container to the left */
.timeline .left {
  left: 0;  padding: 10px 40px 10px 10px;
}

/* Place the container to the right */
.timeline .right {
  left: 50%;  padding: 10px 10px 10px 40px;
}

/* Add arrows to the left container (pointing right) */
.timeline .left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 2;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.timeline .right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 2;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/*...