JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.2.0/intro.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.2.0/introjs.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<div class="row">
  <div id="step1" class="col-sm-4 well">element 1</div>
  <div id="step2" class="col-sm-4 well">element 2</div>
  <div id="step3" class="col-sm-4 well">element 3</div>
</div>

<div class="row"> 
  <div id="step4" class="col-sm-4 well">element 4</div>
  <div id="step5" class="col-sm-4 well">element 5</div>
  <div id="step6" class="col-sm-4 well">element 6</div>
</div>

<div class="row">
  <div id="step7" class="col-sm-4 well">element 7</div>
  <div id="step8" class="col-sm-4 well">element 8</div>
  <div id="step9" class="col-sm-4 well">element 9</div>
</div>

<div class="flexcontainer">
  <button type="button" class="btn btn-success">start</button>
</div>

CSS

button{
  width: 100px;
}

.row{
  margin:25px;
}

.well{
  text-align: center;
  font-size:150%;
}

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

JavaScript

$("button").on("click", function(){
	
  // create an array with objects describing each step in the guided tour 
  var Steps = [
    {
      element: '#step1',
      intro: "text step 1",
      position: 'bottom'
    },
    {
      element: '#step2',
      intro: "text step 2",
      position: 'bottom'
    },
    {
      element: '#step3',
      intro: "text step 3",
      position: 'bottom'
    },
    {
      element: '#step4',
      intro: "text step 4",
      position: 'bottom'
    },
    {
      element: '#step5',
      intro: "text step 5",
      position: 'bottom'
    },
    {
      element: '#step6',
      intro: "text step 6",
      position: 'bottom'
    },
    {
      element: '#step7',
      intro: "text step 7",
      position: 'bottom'
    },
    {
      element: '#step8',
      intro: "text step 8",
      position: 'bottom'
    },
    {
      element: '#step9',
      intro: "text step 9",
      position: 'bottom'
    }
  ];
            
  // initialize an introjs instance          
  var intro = introJs();

  // load data
  intro.setOptions({steps: Steps });

  // start intro.js
  intro.start();
  
})