JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 
Stage progress indicator 
by Raj Madhuram
http://geekraj.com
Circle code from: http://jsfiddle.net/RsGQ4/
-->

<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

<div class="stage done">
    <span class="txt">
       1
    </span>
</div>
<div class="beam done">
</div>
<div class="stage done">
    <span class="txt">
       2
    </span>
</div>  
<div class="beam">
</div>
<div class="stage">
    <span class="txt">
       3
    </span>
</div>  
<div class="beam">
</div>
<div class="stage">
    <span class="txt">
       4
    </span>
</div>

CSS

.stage {
    border:1px solid #ccc;
    height:20px;
    width:20px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    background: #eee;
    float: left;
}

.beam {
    width: 20px;
    position: relative;
    height: 3px;
    top: 9px;
    background: #ccc;
    float: left;
}

.done {
    background: #88ff88;
}

.stage .txt {
    font-family: 'Fjalla One', sans-serif;
    font-size: 12px;
    position: relative;
    left: 7px;
    top: -1px;
    
}