JSFiddle - React, Tailwind, and code Playground

by SCATORY

HTML

<section class="timeline">
  <ul>
    <li id="define">
      <div class="one">
        <h2 class="timeline">DEFINE GOALS <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
        <p class="tl-tx">Reviewing and prioritizing your <b>short- and long-term goals</b>, objectives, and tolerance for risk</p>
      </div>
    </li>

     <li>
      <div>
        <h2 class="timeline">REVIEW FINANCES <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
        <p class="tl-tx">Developing a summary of your current financial situation, including a net worth statement, cash flow/budget summary, and analysis of each element of financial planning as it currently relates to your specific financial situation</p>
      </div>
    </li>
     

       <li>
      <div>
        <h2 class="timeline">REVIEW INVESTMENTS <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
    <p class="tl-tx"> In-depth detailed review of your <b>current investment portfolio</b> and asset management strategy development</p>
      </div>
    </li>

         <li>
      <div>
        <h2 class="timeline">DEVELOP STRATEGY <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
     <p class="tl-tx">Developing a summary of your current financial situation, including a net worth statement, cash flow/budget summary, and analysis of each element of financial planning as it currently relates to your specific financial situation</p>
      </div>
    </li>


         <li>
      <div>
        <h2 class="timeline">PLAN FOR RETIREMENT <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
    <p class="tl-tx">Completing a <b>retirement planning assessment</b>, including financial projections of assets required at estimated retirement date, desired incomerequirements and source coordination as well as using various quantitative measuring techniques, such as back testing, bear market...

CSS

.arrow-left{
	background: url('img/arrow-left.svg');
	float: left;
	width: 270px;
	height: 50px;
	display: flex;
	justify-content: center;
    flex-direction: column;
}

.arrow-right{
	background: url('img/arrow-right.svg');
	float: right;
	width: 270px;
	height: 50px;
	display: flex;
	justify-content: center;
    flex-direction: column;
}

.text-right{
	margin-top: 20px;
	margin-bottom: 40px;
	float: right;
	text-align: left;
	width: 270px;
}

.text-left{
	margin-top: 20px;
	margin-bottom: 40px;
	padding-left: 10px;
	float: left;
	text-align: left;
	width: 270px;
}

.timeline{
	width: 100%;
	text-align: center;
	letter-spacing: .1em !important;
}

.left-col{
	padding-top: 182px;
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #fff;
}
 
.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: #640722;
  color: #fff;
  height: 45px;
    overflow: hidden;
    text-align: left;
}
 
.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}
.timeline ul li:nth-child(odd) div {
  left: 45px;
}
 
.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #640722 transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}
 
.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #640722;
}

.timeline ul li::after {
  background: #fff;
  transition: background .5s ease-in-out;
}
 
.timeline ul li.in-view::after {
  background: #27e9f5;
}
 
.timeline ul li div {
  visibility: hidden;
  opacity: 0;
 ...

JavaScript

(function($) {
   $('#define').click(function(){
  $('.one').toggleClass('height');
})

});