JSFiddle - React, Tailwind, and code Playground

by John Crafts

HTML

<div class="act_timeline">
  <div class="tl_item act_legalized_med">
    <span class="tl_date">November 2008</span>
    <p>Michigan legalizes medical marijuana.</p>
  </div>
  <div class="tl_item act_legalized_med">
    <span class="tl_date">January 1, 2014</span>
    <p>Illinois legalizes medical marijuana.</p>
  </div>
  <div class="tl_item act_proposed_med">
    <span class="tl_date">July 2014</span>
    <p>Compassionate Care Act is created to offer medical marijuana to the state of New York.</p>
  </div>
  <div class="tl_item act_opened">
    <span class="tl_date">2015</span>
    <p>Illinois lab opens.</p>
  </div>
  <div class="tl_item act_legalized_med">
    <span class="tl_date">January 2016</span> 
    <p>Compassionate Care Act comes into effect making medicinal marijuana use legal in New York.</p>
  </div>
  <div class="tl_item act_legalized_med">
    <span class="tl_date">April 2016</span>
    <p>Pennsylvania legalizes medical marijuana.</p>
  </div>
  <div class="tl_item act_legalized_med">
    <span class="tl_date">September 2016</span>
    <p>Ohio legalizes medical marijuana.</p>
  </div>
  <div class="tl_item act_opened">
    <span class="tl_date">2017</span>
    <p>Pennsylvania Lab Opened.</p>
  </div>
  <div class="tl_item act_legalized_med">
    <span class="tl_date">February 2018</span>
    <p>Medical marijuana became available for patients at dispensaries in PA.</p>
  </div>
  <div class="tl_item act_legalized_rec">
    <span class="tl_date">November 2018</span>
    <p>Michigan legalizes recreational marijuana.</p>
  </div>
  <div class="tl_item act_opened">
    <span class="tl_date">2019</span>
    <p>Ohio lab opened, New York lab opened, Expanded operations to Trafford, PA.</p>
  </div>
</div>

CSS

.act_timeline {
  padding-bottom: 60px; /* only for fiddle */
  width: 500px; max-width: 90%;
  margin: 0 auto;
  border-left: 2px solid black;
  padding-left: 10px;
}
.tl_item p {
  margin: 5px auto;
  padding: 0;
}
.tl_item {
  margin: 22px 0;
  background: white;
  background: #00A69C;
  padding: 6px;
  color: white;
}
.tl_item:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7.5px 10px 7.5px 0;
  border-color: transparent #00A69C transparent transparent;
  position: absolute; margin-left: -16px;
  vertical-align: middle;
}
.tl_item .tl_date {
  display:block;
  font-weight: bold;
}