JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div class="line">
    <div class="col3"><span class="circle"></span></div>
    <div class="col3"><span class="circle"></span></div>
    <div class="col3"><span class="circle"></span></div>
    <div class="col3"><span class="circle"></span></div>
</div>

CSS

.line{
	background-color:#FF6D00;
	height:6px;
	margin-top:50px;
    position:relative;
    border:1px solid red;
    
}
.line .col3{
    float: left;
    position: relative;
    top: -8px;
    width: 288px;
}
.line .col3 .circle{
	background-color:#FF6D00;
	border: 5px solid #FFFFFF;
	border-radius: 50%;
	display: block;
	height: 20px;
	margin: -7px auto;
	width: 20px;
}