JSFiddle - React, Tailwind, and code Playground

by abhishek_soni

HTML

<div class="timeline">
<div class="container">
<!-- <h2>2017</h2>
<p>Lorem ipsum..</p> -->
</div>
</div>

CSS

/* The actual timeline (the vertical ruler) */
.timeline {
position: absolute;
max-width: 1200px;
margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: black;
top: 0;
bottom: 0;
left: 50%;
margin-left: 0px; /*  -3px; */
}
.container {
padding: 10px 40px;
/* position: relative; */
background-color: inherit;
width: 50%;
}

/* The circles on the timeline */
.container::after {
content: '';
position: absolute;
left: 30px;
width: 25px;
height: 25px;
right: 17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}