JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<ul class="wizard-progress clearfix">
    <li><span class="step-name">
        <br />
        Welcome </span><span class="visuallyhidden">Step </span><span class="step-num">1/1</span>
    </li>
    <li><span class="step-name">
        <br />
        Questions</span> <span class="visuallyhidden">Step </span><span class="step-num">1/16</span>
    </li>
    <li><span class="step-name">Recording<br />
        Preparations</span> <span class="visuallyhidden">Step </span><span class="step-num">
            1/1</span> </li>
    <li><span class="step-name">Microphone<br />
        Check</span> <span class="visuallyhidden">Step </span><span class="step-num">1/1</span>
    </li>
    <li><span class="step-name">
        <br />
        Recording</span> <span class="visuallyhidden">Step </span><span class="step-num">1/7</span>
    </li>
    <li><span class="step-name">General Information</span> <span class="visuallyhidden">
        Step </span><span class="step-num">1/2</span> </li>
    <li><span class="step-name">End</span> <span class="visuallyhidden">Step </span><span
        class="step-num">1/1</span> </li>
</ul>

CSS

.visuallyhidden {
        display: none;
    }
    .wizard-progress {
        list-style: none;
        list-style-image: none;
        margin: 0 0 0 0;
        padding: 0;
        white-space: nowrap;
    }
    .wizard-progress li {
        float: left;
        margin-right: 50px;
        text-align: center;
        position: relative;
        width: 100px;
    }
    .wizard-progress .step-name {
        display: table-cell;
        height: 35px;
        vertical-align: bottom;
        text-align: center;
        width: 100px;
    }
    .wizard-progress .step-name-wrapper {
        display: table-cell;
        height: 100%;
        vertical-align: bottom;
    }
    .wizard-progress .step-num {
        line-height: 26px;
        font-size: 16px;
        font-weight: bold;
        border: 2px solid #000;
        border-radius: 50%;
        width: 58px;
        display: inline-block;
        margin-top: 10px;
    }
    .wizard-progress .step-num:after {
        content:"";
        display: block;
        background: #000;
        height: 3px;
        width: 90px;
        position: absolute;
        bottom: 14px;
        left: 80px;
    }
    .wizard-progress li:last-of-type .step-num:after {
        display: none;
    }
    .wizard-progress .active-step .step-num {
        background-color: #00ffa0;
    }

JavaScript

//alert(document.location)
//alert(request.querystring(id))
$('.wizard-progress li').eq(0).addClass("active-step")
$('.wizard-progress li').eq(0).find(".step-num").html(9)
$('.wizard-progress li span').eq(3).removeClass("active-step")