JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://godwin.azurewebsites.net/content/jquery.steps.css" rel="stylesheet" />
<script src="https://godwin.azurewebsites.net/Scripts/jquery.steps.js"></script>

<div id="main-wizard">
    
    <heading>Welcome</heading>
    <section>
        <h3>First name</h3>
        Welcome to Wizard ...
    </section>
    
    <heading>Personal Information</heading>
    <section>
        
        <h3>First Name</h3>
        <input type="text" id="primary_fn"/>
        <h3>Last Name</h3>
        <input type="text" id="primary_fn"/>
    </section>

    <heading>Education</heading>
    <section>
        
        <div id="sub-wizard">
            
            <heading>College Information</heading>
            <section>
                <h3>College Name</h3>
                <input type="text" id="primary_fn"/>
            </section>
            
            <heading>School Information</heading>
            <section>
                <h3>School Name</h3>
                <input type="text" id="primary_fn"/>
            </section>
        </div>
    </section>
    
    <heading>Comments</heading>
    <section>
        <h3>Comments?</h3>
        <input type="text" id="primary_fn"/>
    </section>
</div>

CSS

.secondary-steps .content {
    min-height: 300px !important;
}

JavaScript

var shoMainWizard = function(){
    $("#main-wizard").steps({
        headerTag: "heading",
        bodyTag: "section",
        transitionEffect: 1,
        autoFocus: true,
        actionContainerTag: "action",
        cssClass: "wizard primary-steps",
        enablePagination: true,
        enableKeyNavigation: true,
        saveState: true,
        enableContentCache: true,
        stepsOrientation: "vertical",

        labels: {
            current: "",
            pagination: "Pagination",
            finish: "Finish",
            next: "Next",
            previous: "Back",
            loading: "Loading ..."
        },

        onStepChanging: function (event, currStepIndex, nextStepIndex) {

            if (nextStepIndex == 2){ // If we are moving on to step with sub-wizard (index 2)
                shoSubWizard(currStepIndex, nextStepIndex);
            }

            return true;
        },
        
        onStepChanged: function (event, currStepIndex, priorStepIndex) {
            $("#main-wizard-p-" + priorStepIndex).hide();
            $("#main-wizard-p-" + currStepIndex).fadeIn();
        }
    });
};

var shoSubWizard = function(currStepIndex, nextStepIndex){
    
    // if sub-wizard note rendered yet
    if (!$('#sub-wizard').hasClass('wizard')){
        $("#sub-wizard").steps({
            headerTag: "heading",
            bodyTag: "section",
            transitionEffect: 1,
            actionContainerTag: "action",
            cssClass: "wizard secondary-steps",
            enablePagination: true,
            enableKeyNavigation: true,
            saveState: true,
            stepsOrientation: "vertical",
            startIndex: 0,
            
            labels: {
                current: "",
                pagination: "Pagination",
                finish: "Finish sub-steps",
                next: "Next",
                previous: "Back",
                loading: "Loading ..."
            },
            
            onFinished: function() {
 ...