JSFiddle - React, Tailwind, and code Playground

HTML

<div class="route-root">
<div class="route route-back">
            <div class="interval"></div>
			<div class="interval" style="width:278px;border-color:green;background:#aaa"></div>
</div>
    
</div>
<div class="route">
			<div class="bubble"></div>
			<div class="arrow">></div>
			<div class="bubble"></div>
			<div class="arrow">></div>
			<div class="bubble"></div>
			<div class="arrow">></div>
			<div class="bubble"></div>
			<div class="arrow">></div>
			<div class="bubble"></div>
			<div class="arrow">></div>
			<div class="bubble"></div>
    </div>

CSS

.interval {
	height:126px;
	position:relative;
	z-index:3;
    float:left;
	left:47px;
	width:139px;
    border:#f00 1px solid;
    background:#888
}
.route {
	height:126px;
	margin:20px 0;
    border:#f1f1f1 1px solid;
    
    position:absolute;
left:0;
top:0;    
}
.route.route-back {
background:#f7f7f7;
}
.route-root {
 position:relative;
}
.arrow {
	width:13px;
	height:13px;
	float:left;
	position:relative;
	z-index:5;
	top:56px;
	margin:0 15px
}
.bubble {
	top:15px;
	position:relative;
	z-index:5;
	width:85px;
	height:85px;
	border-radius:47px;
	border:#32bcd8 5px solid;
	background:#888 50% 50% no-repeat;
	float:left;
}