JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.generalsentiment.com/js/libs/bootstrap-tour/0.3.0/bootstrap-tour.min.js"></script>
<script src="http://www.generalsentiment.com/js/libs/cookie/1.3.1/jquery.cookie.min.js"></script>
<link rel="stylesheet" href="http://www.generalsentiment.com/css/libs/bootstrap-tour/0.3.0/bootstrap-tour.css">
<link rel="stylesheet" href="http://www.generalsentiment.com/css/libs/bootstrap-twitter/2.3.1/bootstrap.min.css">
<script src="http://www.generalsentiment.com/js/libs/bootstrap-twitter/2.3.1/bootstrap.min.js"></script>
<div class="step-handle" id="step-one">Step One</div>
<div class="step-handle" id="step-two">Step Two</div>
<div class="step-handle" id="step-three">Step Three</div>

<hr />
<hr />
<hr />

<button id="pause-tour">Pause Tour</button>
<hr />
<button id="resume-tour">Resume Tour</button>

CSS

.step-handle {
    
    width: 300px;
    height: 100px;
    border: 1px solid black;
    margin-bottom: 10px;
    
}

JavaScript

var tour = new Tour({
    /*afterSetState: function(key, value) {
    			console.log(key, value, tour.getState(), tour.getStep());
    		}*/
});

tour.addStep(
    {
        element: "#step-one", // string (jQuery selector) - html element next to which the step popover should be shown
        title: "Step One Title", // string - title of the popover
        content: "Step One Content" // string - content of the popover
    });

tour.addStep(
    {
        element: "#step-two",
        title: "Step Two Title",
        content: "Step Two Content"
    });

tour.addStep(
    {
        element: "#step-three",
        title: "Step Three Title",
        content: "Step Three Content"
    }
);

tour.restart();

$("#pause-tour").on("click", function() {
    
    tour.end();
    
});


$("#resume-tour").on("click", function() {
    
    tour.start(true);
    
});