JSFiddle - React, Tailwind, and code Playground

by exwar

HTML

<div class="route">
    <div class="route-interval">
	    <div class="interval"></div>
    	<div class="interval green"></div>    
    </div>
    
    <div class="bubble first"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
</div>

CSS

.route {
    position: relative;
    white-space: nowrap;
    height: 126px;
    margin: 20px 0;
    border: #f1f1f1 1px solid;
    background: #F2EFDF;    
    font-size: 0;
    letter-spacing: -5px;
    }

.route-interval {
    position: relative;
	width: 139px;
    height: 100%;
    float: left;
    margin-right: -139px;
    left: 47px;
}

.interval {
    height: 100%;
    position: relative;
    z-index: 3;
    float: left;
    margin-right: -100%;    
    width: 100%;
    background: #656F8C;
    }

.interval.green {
    z-index: 2;
    width: 300%;
    background: #9BBFAB;
    }

.bubble {
    opacity: 1;
    top: 15px;
    position: relative;
    z-index: 5;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    border: #211426 5px solid;
    background: #413659;
    margin-left: 43px;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: normal;
    font-size: 24px;
    
    -webkit-transition: opacity 150ms ease-in;
       -moz-transition: opacity 150ms ease-in;
         -o-transition: opacity 150ms ease-in;
	    	transition: opacity 150ms ease-in;
    }

.bubble:hover {
	opacity: .8;
}

.bubble:before {
    content: '→';
    position: absolute;
    top: 32%;
    left: -37px;
    }

.bubble.first {
    margin-left: 0;
    }

.bubble.first:before {
    display: none;
    }