JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="steps"><div class="step_in step1 current" data-stepid="1"><span><span class="step-text">Step</span><span class="step-number" style="
    background: #0280d7;
    width: 46px;
    height: 46px;
    display: block;
">1</span><div class="separator" style="
    display: block;    position: absolute;    left: 100%;    top: 50%;    margin-top: -2px;    
    width: 200%;    height: 4px;    
    /* background: blue no-repeat center 0; */
"></div></span></div><div class="step_in step2 active" data-stepid="2"><span><span class="step-text">Step</span><span class="step-number">2</span><div class="separator"></div></span></div><div class="step_in step3" data-stepid="3"><span><span class="step-text">Step</span><span class="step-number">3</span><div class="separator"></div></span></div></div>

CSS

.steps {
        display: -webkit-box;                   //iOS6, Safari 3.1-6
    display: -ms-flexbox;                   //IE10
    display: -webkit-flex;                  //android 4.3, IE mobile, Safari
    display: -moz-flex;
    display: flex;
    
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;      //android 4.3, Safari
    -ms-justify-content: space-between;          //IE mobile
    -moz-justify-content: space-between;
    justify-content: space-between;
    
        position: relative;
        height: 46px; 
        margin: 22px auto 40px;
        overflow: hidden;
        }
        .steps:after{
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -10px;
            width: 100%;
            height: 20px;
            background: #96a6bd;
        }
        .step_in{
            // float: left;
            // margin-left: 35px;
            width: 46px;
            height: 46px;
            text-align: center;
            border-radius: 46px;
            color: #fff;
            cursor: pointer;
            font: bold 18px/36px Arial, sans-serif;
            position: relative;
            z-index: 1;
            background: #033967;
            }
            .steps_in:after{
                content: '';
                display: block;
                position: absolute;
                left: 100%;
                top: 50%;
                margin-top: -2px;
                width: 200px;
                height: 4px;
                background: blue no-repeat center 0;
            }
            .steps_in.current:after{background: red no-repeat center 0;}
            .steps_in.step3:after{display: none;}
            .steps_in.active,
            .steps_in.current{background: #0280d7;}