JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Start Facts Block Area -->
	<div class="facts">
					<div class="fact-blocks timeline">
				<h2 class="step-title">Cows</h2>
					<img class="factimg" src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" alt="cows is good">
					<ol class="circles-list" start="1">						
                        <li>this is number 1</li>
											<li>this is number 2</li>
											<li>this is number 3</li>
					</ol>
			</div>
					<div class="fact-blocks timeline">
				<h2 class="step-title">tomatoes</h2>
					<img class="factimg" src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" alt="tomatoes alt tag">
					<ol class="circles-list">						
                        <li>mispar 1</li>
											<li>number 2</li>
											<li>magniv 3</li>
					</ol>
			</div>
					<div class="fact-blocks timeline">
				<h2 class="step-title">Envelope</h2>
					<img class="factimg" src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" alt="envelope">
					<ol class="circles-list">						
                        <li>intersting fact about envelope</li>
											<li>intersting fact about envelopedfdfdfdf</li>
											<li>fdf df dintersting fact about envelope</li>
					</ol>
			</div>
			</div>	<!-- End Facts Block Area -->

CSS

.fact-blocks {font-size:14px;background: #eff9e8 none repeat scroll 0 0;border-top:1px solid #d0eeb8;}
.fact-blocks:nth-of-type(odd) {background-color:#d8e5f6;border-top:1px solid #b8d0ee;}

.timeline::before {
    background: #cecece none repeat scroll 0 0;
    bottom: 0;
    content: "";
    display: block;
    left: 19px;
    position: absolute;
    top: 0;
    width: 12px;
}

.timeline {
    padding: 44px 0 56px 60px;
    position: relative;
}

.step-title:before {
    background: #cecece none repeat scroll 0 0;
    border-radius: 50%;
    content: "";
    height: 28px;
    left: -57px;
    margin-top: -12px;
    position: absolute;
    top: 50%;
    width: 28px;
}

.fact-blocks h2 {
    background-color: #72c630;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0 0 45px 9px;
    padding: 11px 24px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    word-spacing: 0;
}
.fact-blocks:nth-of-type(odd) h2 {
    background-color: #245697;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0 0 45px 9px;
    padding: 11px 24px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    word-spacing: 0;
}

.fact-blocks h2:after {
    border-bottom: 8px solid transparent;
    border-right: 11px solid #72c630;
    border-top: 8px solid transparent;
    content: "";
    height: 0;
    left: 0;
    margin: -7px 0 0 -10px;
    position: absolute;
    top: 50%;
    width: 0;
}

.fact-blocks:nth-of-type(odd) h2::after {
    border-bottom: 8px solid transparent;
    border-right: 11px solid #245697; /*here the color doesn't change*/
    border-top: 8px solid transparent;
    content: "";
    height: 0;
    left: 0;
    margin: -7px 0 0...