JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<section id="timeline">
  <article>
    <div class="inner">
      <span class="step">1</span>
      <div style="text-align: right;">
      <h3>Title 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis.  Mauris id finibus ligula. Aenean orci diam, ornare ac nisi et, semper fermentum risus. Phasellus vestibulum nibh orci, non auctor justo tempus et. Vestibulum pretium nulla quis ligula sollicitudin, euismod consequat enim elementum.</p>
      </div>
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="step">2</span>
      <h3>Title 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis.  Mauris id finibus ligula. Aenean orci diam, ornare ac nisi et, semper fermentum risus. Phasellus vestibulum nibh orci, non auctor justo tempus et. Vestibulum pretium nulla quis ligula sollicitudin, euismod consequat enim elementum.</p>
    </div>
  </article>
  <article>
    <div class="inner">
      <div style="text-align: right;">
      <span class="step">3</span>
      <h3>Title 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis.  Mauris id finibus ligula. Aenean orci diam, ornare ac nisi et, semper fermentum risus. Phasellus vestibulum nibh orci, non auctor justo tempus et. Vestibulum pretium nulla quis ligula sollicitudin, euismod consequat enim elementum.</p>
      </div>
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="step">4</span>
      <h3>Title 4</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero...

CSS

section#timeline {
  width: 100%;
  margin: 20px auto;
  position: relative;
}

/* the LINE */
section#timeline:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 82%;
  background: #000;
}

/* each section */
section#timeline article {
  width: 100%;
  margin: 0 0 50px 0;
  position: relative;
}

/* section clear divs */
section#timeline article:after {
  content: '';
  display: block;
  clear: both;
}

/* dots */
section#timeline article div.inner span.step {
  display: block;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 -30px;
  border-radius: 100%;
  border: 7px solid #ffffff;
  font-size: 1.7em;
  background: #000;
  color: #fff;
  text-align: center;
  padding: 0px;
  line-height: 2em;
}


/* right column */
section#timeline article div.inner {
  width: 45%;
  float: left;
  margin: 5px 0 0 0;
  border-radius: 6px;
}

/* left column  */
section#timeline article:nth-child(2n+2) div.inner {
  float: right;
}