JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bootstraptour.com/assets/vendor/bootstrap/tooltip.js"></script>
<script src="http://bootstraptour.com/assets/vendor/bootstrap/popover.js"></script>
<script src="http://bootstraptour.com/assets/vendor/bootstrap/alert.js"></script>
<script src="http://bootstraptour.com/assets/vendor/bootstrap/collapse.js"></script>
<script src="http://bootstraptour.com/assets/js/bootstrap-tour.js"></script>
<link rel="stylesheet" href="http://bootstraptour.com/assets/vendor/bootstrap/bootstrap.css">
<link rel="stylesheet" href="http://bootstraptour.com/assets/css/bootstrap-tour.css">
<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="start-tour">start 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.addSteps([
    {
        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
    },
    {
        element: "#step-two",
        title: "Step Two Title",
        content: "Step Two Content"
    },
    {
        element: "#step-three",
        title: "Step Three Title",
        content: "Step Three Content"
    }
]);


tour.restart();

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