JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//usablica.github.io/intro.js/minified/intro.min.js"></script>
<link rel="stylesheet" href="//usablica.github.io/intro.js/minified/introjs.min.css">
<div id="step1">
Step 1
</div>
<div id="step2">
Step 2
</div>
<div id="step3">
Step 3
</div>
<hr />
<a onclick="startObjectsIntro();">Start intro</a>

JavaScript

var options_before = {
        steps: [
          	{
                element: '#step1',
                intro: 'Step One'
            },
            {
                element: '#step2',
                intro: "Step Two"
            },
            {
                element: '#step3',
                intro: "Final Step"
            }
        ]
    };

    function startObjectsIntro() {
        var intro = introJs();
        intro.setOptions(options_before);
        intro.start().onbeforechange(function () {

            if (intro._currentStep == "2") {
                alert("This is step 2")
            } 
        });
    }