JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

.steps {
    display: block;
}

.stepWrapper {
    float: left;
}

.step {
    height: 19px;
    width: 19px;
    border-radius: 50%;
    background: #aaddee;
    border: 2px solid #336699;
    float: left;
    margin-top: 11px;
}

.step.done {
	background: #336699;
}

.stepBind {
    float: left;
    height: 2px;
    background: #336699;
    margin-top: 21.5px;
}