JSFiddle - React, Tailwind, and code Playground

HTML

<div id="timeline">
    <div id="r0" class="circle_small">
        <h3>P</h3>
    </div>
    <div id="r1" class="circle">
        <h3>1</h3>
    </div>
    <div id="r2" class="circle_small">
        <h3>2</h3>
    </div>
    <div id="r3" class="circle_small">
        <h3>3</h3>
    </div>
    <div id="r4" class="circle_small">
        <h3>4</h3>
    </div>
    <div id="r5" class="circle_small">
        <h3>A</h3>
    </div>
    <hr id="line">
</div>

CSS

.circle {
	width: 60px;
	height: 60px;
	background-color: #110436;
	color: white;
	border-radius: 30px;
	float: left;
	margin: 10px;
	position: relative;
	top: -8px;
}
.circle_small {
	width: 60px;
	height: 60px;
	background-color: #e1dae8;
	color: white;
	border-radius: 30px;
	float: left;
	margin: 10px;
	position: relative;
	top: -8px;
}
.circle_small h3 {
	position: relative;
	color: white;
	border: none !important;
	text-align: center;
}
.circle h3 {
	position: relative;
	color: white;
	border: none !important;
	text-align: center;
}
#line {
	width: 420px;
	position: relative;
	left: -40px;
	top: -50px;
	border: 1px solid #e1dae8;
	height: 0px;
	color: #330066;
	border-style: dashed;
	z-index: -1;
}
#timeline {
	padding-top: 20px;
	margin-bottom: -10px;
}