JSFiddle - React, Tailwind, and code Playground

HTML

<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 class="interval top"></div>
			<div class="interval" style="width:278px;border-color:green;background:#aaa"></div>
</div>
<!--		<div class="route">
			<div class="bubble"></div>
			<div class="arrow">></div>
			<div class="bubble"></div>
			<div class="interval"></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="interval"></div>
		</div> -->

CSS

.interval {
	height:126px;
	position:absolute;
	z-index:3;
    float:left;
	left:47px;
	width:139px;
    border:#f00 1px solid;
    background:#888
}
.top{
	z-index: 4;
}

.route {
	height:126px;
	margin:20px 0;
    border:#f1f1f1 1px solid;
    background:#f7f7f7
}
.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;
}