JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://godwin.azurewebsites.net/content/jquery.steps.css" rel="stylesheet" />
<script src="https://rawgit.com/leo-fcx/jquery-steps/master/build/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

$("#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 ..."
    }
});

$("#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() {
        $("#main-wizard").steps("next");
    }
});