JSFiddle - React, Tailwind, and code Playground

by Malik Naik

HTML

<div class="container_24">
  <div class="grid_24">
	<section id="timeline">
		<div class="content">
		  <div class="timeline">
			<article class="post">
			  <div class="timeline-time">
				<time>January, 2005-2010</time>
			  </div>
			  
			  <div class="timeline-content tc-left bg-blue wow slideInLeft" id="tc1">
				<h2 class="entry-title">
				  Title 1 Goes Here
				</h2>
				
				<div class="entry-content">
				  Content 1 Goes Here
				</div>
			  </div>
			</article><!-- .post -->

			<article class="post">
			  <div class="timeline-time">
				<time>Jan 1, 2005</time>
			  </div>
			  
			  <div class="timeline-content bg-green wow slideInRight" id="tc2">
				<h2 class="entry-title">
				  Title Goes Here
				</h2>
				<div class="entry-content">
				  <p>Content 2 Goes Here</p>
				</div>
			  </div>
			</article>

			<article class="post">
			  <div class="timeline-time">
				<time>Jan 1, 2006</time>
			  </div>
			  
			  <div class="timeline-content tc-left bg-red wow slideInLeft" id="tc3">
				<h2 class="entry-title">
				  Title Goes Here
				</h2>
				
				<div class="entry-content">
				 <p>Content 3 Goes Here</p>
				</div>
			  </div>
			</article><!-- .post -->
			
			<article class="post">
			  <div class="timeline-time">
				<time>Jan 1, 2008</time>
			  </div>
			  
			  <div class="timeline-content bg-orange wow slideInRight" id="tc4">
				<h2 class="entry-title">
				  Title Goes Here
				</h2>
				<div class="entry-content">
				  <p>
					Content 4 Goes Here
				  </p>
				</div>
			  </div>
			</article>

			<article class="post">
			  <div class="timeline-time">
				<time>Jan 1, 2010</time>
			  </div>
			  
			  <div class="timeline-content tc-left bg-gray wow slideInLeft" id="tc5">
				<h2 class="entry-title">
				  Title Goes Here
				</h2>
				<div class="entry-content">
					<p>Content 5 Goes Here</p>
				</div>
			  </div>
			</article><!-- .post -->

		  </div><!-- end timeline -->
		</div><!-- end content -->
	</section><!--...

CSS

/*************************
     Timeline Styles
*************************/
	.timeline {
	  padding: 20px 0;
	  position: relative;
	}
	.timeline:before {
	  background-color: #d2d2d2;
	  background-color: rgba(0, 0, 0, 0.2);
	  border-radius: 2px;
	  content: "";
	  display: block;
	  height: 100%;
	  left: 50%;
	  margin-left: -2px;
	  position: absolute;
	  top: 0;
	  width: 4px;
	}
	.timeline .post {
	  border: 0 none;
	  margin: 0;
	  padding: 0 40px 5px 0;
	  width: 50%;
	}
	.timeline .post:last-child, .timeline .post:nth-child(even):last-child {
	  padding-bottom: 0;
	}
	.timeline .post:nth-child(even) {
	  margin-left: 50%;
	  padding: 0 0 5px 40px;
	}
	.timeline .post:nth-child(even) .timeline-time {
	  left: auto;
	  margin: 31px 40px 0 0;
	  right: 50%;
	  text-align: right;
	}
	.timeline .post:nth-child(even) .timeline-content:before {
	  border: 15px solid transparent;
	  border-right-color: #ccc;
	  left: -30px;
	  right: auto;
	}
	.timeline .post:nth-child(even) .timeline-content:after {
	  border: 14px solid transparent;
	  
	  left: -28px;
	  right: auto;
	}
	.timeline .post .timeline-time {
	  color: #999;
	  left: 50%;
	  margin: 31px 0 0 40px;
	  position: absolute;
	}
	.timeline .post .timeline-content {
	  border: 1px solid #ccc;
	  border-radius: 3px;
	  padding: 46px;
	  position: relative;
	}
	.timeline .post .timeline-content:before, .timeline .post .timeline-content:after {
	  border: 15px solid transparent;
	  border-left-color: #ccc;
	  content: "";
	  display: block;
	  position: absolute;
	  right: -30px;
	  top: 26px;
	}
	.timeline .post .timeline-content:after {
	  border: 14px solid transparent;
	  right: -28px;
	  top: 27px;
	}
	

	.tc-left {right: 40px;}
	.bg-blue {background: blue;}
	.bg-green {background: green;}
	.bg-red {background: red;}
	.bg-orange {background: orange;}
	.bg-gray {background: gray;}
	
	
	
.timeline .post:nth-child(1n) .timeline-content.bg-blue::before, .timeline .post:nth-child(1n)...