JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
     <h1 class="col-md-5 col-sm-12 col-xs-12">Registration</h1> 
    <div class="checkout-wrap col-md-7 col-sm-12 col-xs-12 pull-right">
        <ul class="checkout-bar">
            <li class="active"><a href="#get-started" data-toggle="tab">Get Started</a>
            </li>
            <li class=""><a href="#about-you" data-toggle="tab">About You</a>
            </li>
            <li class=""><a href="#looking-for" data-toggle="tab">Looking For</a>
            </li>
            <li class=""><a href="#">Review</a>
            </li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="tabbable-panel">
        <div class="tabbable-line">
            <ul class="nav nav-tabs ">
                <li class="active"><a href="#get-started" data-toggle="tab"> Get Started </a>
                </li>
                <li><a href="#about-you" data-toggle="tab"> About You </a>
                </li>
                <li><a href="#looking-for" data-toggle="tab"> Looking For </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="get-started">
                    <div class="form">
                        <asp:ValidationSummary runat="server" CssClass="text-danger" />
                        <div class="col-md-6 col-sm-6 col-xs-12 no-padding">
                            <div class="row">
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <label class="control-label">Zip code where you live?:</label>
                                        <asp:TextBox ID="zip" CssClass="form-control" name="zip code" placeholder="i.e. 17110" runat="server"></asp:TextBox>
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <div...

CSS

body {
    padding:20px;
    margin:20px;
}
.checkout-wrap {
    font-family:'PT Sans Caption', sans-serif;
    margin: 30px auto 100px;
    z-index: 0;
}
ul.checkout-bar li {
    color: #ccc;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    display: inline-block;
    margin: 50px auto;
    padding: 0;
    text-align: center;
    width: 24.5%;
}
ul.checkout-bar li:before {
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    background: #ddd;
    border: 2px solid #FFF;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
    height: 34px;
    left: 40%;
    line-height: 34px;
    position: absolute;
    top: -60px;
    width: 34px;
    z-index: 99999;
}
ul.checkout-bar li.active {
    color: #A6447A;
    font-weight: bold;
}
ul.checkout-bar li.active:before {
    background: #A6447A;
}
ul.checkout-bar li.visited {
    color: #036c99;
    z-index: 99999;
    background: none;
}
ul.checkout-bar li.visited:before {
    background: #036c99;
    z-index: 99999;
}
ul.checkout-bar li:nth-child(1):before {
    content:"1";
}
ul.checkout-bar li:nth-child(2):before {
    content:"2";
}
ul.checkout-bar li:nth-child(3):before {
    content:"3";
}
ul.checkout-bar li:nth-child(4):before {
    content:"4";
}
ul.checkout-bar li:nth-child(5):before {
    content:"5";
}
ul.checkout-bar li:nth-child(6):before {
    content:"6";
}
ul.checkout-bar a {
    color: #ccc;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
ul.checkout-bar li.active a {
    color: #A6447A;
}
ul.checkout-bar li.visited a {
    color: #036c99;
}
.checkout-bar li.active:after {
    -webkit-animation: myanimation 3s 0;
    background-size: 35px 35px;
    background-color: #A6447A;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent...

JavaScript

$(document).ready(function () {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

        var href = $(e.target).attr('href');
        var $curr = $(".checkout-bar  a[href='" + href + "']").parent();

        $('.checkout-bar li').removeClass();

        $curr.addClass("active");
        $curr.prevAll().addClass("visited");


    });
});