JSFiddle - React, Tailwind, and code Playground

HTML

<div id="form-wizard" class="wizard">
    <div class="steps">
        <div data-target="#st1" class="active"><a href="#">registration</a>
        </div>
        <div data-target="#st2"><a href="#">Programs</a>
        </div>
        <div data-target="#st3"><a href="#">Payment</a>
        </div>
    </div>
    <div class="sub-steps">
        <div data-target="#sb1" class="active"><a href="#">Substep1</a>
        </div>
        <div data-target="#sb2"><a href="#">Substep2</a>
        </div>
        <div data-target="#sb3"><a href="#">Substep3</a>
        </div>
        <div data-target="#sb4"><a href="#">Substep4</a>
        </div>
    </div>
</div>
<div class="step-content">
    <div class="step-pane active" id="st1">
        <div class="sub-step-content">
            <div class="sub-step-pane active" id="sb1">
                <p>This is the SUB-STEP 1</p>
            </div>
            <div class="sub-step-pane" id="sb2">
                <p>This is the SUB-STEP 2</p>
            </div>
            <div class="sub-step-pane" id="sb3">
                <p>This is the SUB-STEP 3</p>
            </div>
            <div class="sub-step-pane" id="sb4">
                <p>This is the SUB-STEP 4</p>
            </div>
        </div>
    </div>
    <div class="step-pane" id="st2">
        <div class="sub-step-content">
            <div class="sub-step-pane active" id="sb1">
                <p>This is the SUB-STEP 1</p>
            </div>
            <div class="sub-step-pane" id="sb2">
                <p>This is the SUB-STEP 2</p>
            </div>
            <div class="sub-step-pane" id="sb3">
                <p>This is the SUB-STEP 3</p>
            </div>
            <div class="sub-step-pane" id="sb4">
                <p>This is the SUB-STEP 4</p>
            </div>
        </div>
    </div>
    <div class="step-pane" id="st3">
        <input type='text' name='name' id='name' placeholder='Enter Your Name' />
        <input type='text' name='name' id='name'...

CSS

.steps a {
    color: #000;
    text-decoration: none;
    cursor: default;
}
.steps {
}
.sub-steps {
    display: none;
}
.steps div {
    background-color: #FFFFFF;
    padding: 5px 20px;
    display: inline-block;
}
.steps a {
    color: #000;
}
.steps .active a:hover {
    cursor: pointer;
}
.steps .active {
    background-color: #BEBEBE;
}
.sub-steps > div {
    padding: 4px 10px;
    display: inline-block;
}
.sub-steps .active {
    background-color: yellow;
}
.step-content {
    border: 1px solid #CCC;
}
.step-content .active, .sub-step-content .active {
    display: block;
}
.step-content .step-pane:not(.active), .sub-step-content .sub-step-pane:not(.active) {
    display: none;
}

JavaScript

var subPanelId = '#st2';

$('#next-step').click(function (e) {

    e.preventDefault();

    var currentTab = $('.steps .active'),
        currentSubTab = $('.sub-steps .active'),
        totalSubtabs = $('.sub-step-pane').size(),
        lastSubTab = $('.sub-step-pane:last');

    if (currentTab.data('target') != subPanelId) {

        moveToTab('.steps', '.step-content', 'next');

    } else {

        if (currentSubTab.index() < (totalSubtabs - 1)) {

            moveToTab('.sub-steps', '.sub-step-content', 'next');

        } else {

            moveToTab('.steps', '.step-content', 'next');

        }
    }

});

$('#prev-step').click(function (e) {

    e.preventDefault();

    var currentTab = $('.steps .active'),
        currentSubTab = $('.sub-steps .active');

    if (currentTab.data('target') != subPanelId && currentSubTab.index() > 0) {

        moveToTab('.steps', '.step-content', 'prev');

    } else {


        if (currentSubTab.index() > 0) {

            moveToTab('.sub-steps', '.sub-step-content', 'prev');

        } else {

            moveToTab('.steps', '.step-content', 'prev');

        }

    }
});

function activateSub(currentTab) {
    if (currentTab == subPanelId || $(currentTab).parent().hasClass('sub-step-content')) $('.sub-steps').show();
    else $('.sub-steps').hide();
}

function moveToTab(tabContainer, tabContent, dir) {

    var totalTabs = $(tabContainer).find('div').size();

    currentTab = $(tabContainer).find('.active');

    if (currentTab.index() < (totalTabs - 1)) {

        currentTab.removeClass('active');

        if (dir == 'next') {
            currentTab.next()
                .addClass('active');
        } else {
            currentTab.prev()
                .addClass('active');
        }
        $('.debug').html(currentTab.next().data('target'));

        $(tabContent).find('div')
            .removeClass('active');

        if (dir == 'next') {
            $(tabContent)
               ...