JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progressbar">
     <div class="stepBind">&nbsp;</div>
    <div class="steps">
        <div class="step">&nbsp;</div>
        <div class="step">&nbsp;</div>
        <div class="step done">&nbsp;</div>
    </div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />sad

CSS

.progressbar{
    top: 0; 
    position: fixed; 
    background-color: #00bbee; 
    width: 100%; 
    height: 45px; 
    left: 0;    
    text-align: center;
}

.steps {
    display: inline-block;
}

.step {
    height: 19px;
    width: 19px;
    border-radius: 50%;
    background: #aaddee;
    border: 2px solid #336699;
    float: left;
    margin-right: 5px;
    z-index: 2;
    position: relative;
    margin-top: 11px;
}
.step:last-child{margin-right: 0}
.step.done {
	background: #336699;
}

.stepBind {
    position: absolute;
    top: 50%; 
    margin-top: -1px;
    width: 100%;
    left: 0;
    height: 2px;
    background: #336699;
}