JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flow"><!--
    --><div id="circle1" class="circle"></div><!--
    --><div class="line"></div><!--
    --><div id="circle2" class="circle"></div><!--
    --><div class="line"></div><!--
    --><div class="circle"></div><!--
    --><div class="line"></div><!--
    --><div class="circle"></div><!--
    --><div class="line"></div><!--
    --><div class="circle"></div><!--
--></div>

CSS

.flow {
    height: 5em;
    left: -0.3em;
    white-space: nowrap;
}

.flow div:first-child {
    left: 0em;	
}

.circle {
    border-radius: 50%;
    display: inline-block;
    background: green;
    width: 2.5em;
    height: 2.5em;
    box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
    -moz-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
    -webkit-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
    position: relative;
    left:inherit;
    z-index: 1;
}

.line {
    display: inline-block;
    background: green;
    height: 0.5em;
    width: 300px;
    position: relative;
    margin-bottom: 1.0em;
    box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
    -moz-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
    -webkit-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
    left:inherit;
}