JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/intro.js/0.9.0/intro.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/intro.js/0.9.0/introjs.min.css">
<div>
    <span style = "margin:100px"data-step="1" data-intro="This is step 1"      data-position="bottom">Step 1
</span>

    <span style="margin:100px" data-step="2" data-intro="This is step 2!">Step 2</span>
</div>
<div>
    <span style = "margin:25px"data-step="3" data-intro="This is step 1"      data-position="bottom">Step 3
</span>

    <span style="margin:100px" data-step="4" data-intro="This is step 2!">Step 4</span>
</div>


 <a style = "margin: 100px" class="btn btn-large btn-success" href="javascript:void(0);" onclick="introJs('body').start();">Click Me!</a>

CSS

.introjs-tooltip {
    min-width: 250px;
    max-width: 250px;
} 
.introjs-bullets ul li a {
    width: 15px;
    height: 15px;
    background-color: blue;
}