JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
    <div class="row smpl-step" style="border-bottom: 0; min-width: 500px;">
        <div class="col-xs-3 smpl-step-step complete">
            <div class="text-center smpl-step-num">Step 1</div>
            <div class="progress">
                <div class="progress-bar"></div>
            </div>
            <a class="smpl-step-icon" style="
    text-align: center;
    font-size: 14px;
    color: #FFF;
    font-weight: 500;
    line-height: 30px;
">1</a>
            
        </div>

        <div class="col-xs-3 smpl-step-step complete">           
            <div class="progress">
                <div class="progress-bar"></div>
            </div>
            <a class="smpl-step-icon"><i class="fa fa-dollar" style="font-size: 60px; padding-left: 18px; padding-top: 5px; color: black;"></i></a>
        </div>
        <div class="col-xs-3 smpl-step-step active">          
            <div class="progress">
                <div class="progress-bar"></div>
            </div>
            <a class="smpl-step-icon"><i class="fa fa-repeat" style="font-size: 60px; padding-left: 7px; padding-top: 7px; color: black;"></i></a>
        </div>
        <div class="col-xs-3 smpl-step-step disabled">           
            <div class="progress">
                <div class="progress-bar"></div>
            </div>
            <a class="smpl-step-icon"><i class="fa fa-download" style="font-size: 60px; padding-left: 8px; padding-top: 4px; color: black; opacity: 0.3;"></i></a>
        </div>
    </div>
</div>

CSS

.smpl-step {
        margin-top: 40px;
    }
    .smpl-step {
        border-bottom: solid 1px #e0e0e0;
        padding: 0 0 10px 0;
    }

    .smpl-step > .smpl-step-step {
        padding: 0;
        position: relative;
    }   

    .smpl-step > .smpl-step-step .smpl-step-num {
        font-size: 17px;
        margin-top: -20px;
        margin-left: 47px;
    }

    .smpl-step > .smpl-step-step .smpl-step-info {
        font-size: 14px;
        padding-top: 27px;
    }

    .smpl-step > .smpl-step-step > .smpl-step-icon {
        position: absolute;
        width: 70px;
        height: 70px;
        display: block;
        background: #5CB85C;
        top: 45px;
        left: 50%;
        margin-top: -35px;
        margin-left: -15px;
        border-radius: 50%;
    }

    .smpl-step > .smpl-step-step > .progress {
        position: relative;
        border-radius: 0px;
        height: 8px;
        box-shadow: none;
        margin-top: 37px;
    }

   .smpl-step > .smpl-step-step > .progress > .progress-bar {
       width: 0px;
       box-shadow: none;
       background: #428BCA;
   }

    .smpl-step > .smpl-step-step.complete > .progress > .progress-bar {
        width: 100%;
    }

    .smpl-step > .smpl-step-step.active > .progress > .progress-bar {
        width: 50%;
    }

    .smpl-step > .smpl-step-step:first-child.active > .progress > .progress-bar {
        width: 0%;
    }

    .smpl-step > .smpl-step-step:last-child.active > .progress > .progress-bar {
        width: 100%;
    }

    .smpl-step > .smpl-step-step.disabled > .smpl-step-icon {
        background-color: #f5f5f5;
    }

    .smpl-step > .smpl-step-step.disabled > .smpl-step-icon:after {
        opacity: 0;
    }

    .smpl-step > .smpl-step-step:first-child > .progress {
        left: 50%;
        width: 50%;
    }

    .smpl-step > .smpl-step-step:last-child > .progress {
        width: 50%;
    }

    .smpl-step > .smpl-step-step.disabled a.smpl-step-icon {
        pointer-events:...