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 class="col-sm-4 well" data-step="1" data-intro="text step 1" data-position='bottom'>element 1</div>
  <div class="col-sm-4 well" data-step="2" data-intro="text step 2" data-position='bottom'>element 2</div>
  <div class="col-sm-4 well" data-step="3" data-intro="text step 3" data-position='bottom'>element 3</div>
</div>

<div class="row"> 
  <div class="col-sm-4 well" data-step="4" data-intro="text step 4" data-position='bottom'>element 4</div>
  <div class="col-sm-4 well" data-step="5" data-intro="text step 5" data-position='bottom'>element 5</div>
  <div class="col-sm-4 well" data-step="6" data-intro="text step 6" data-position='bottom'>element 6</div>
</div>

<div class="row">
  <div class="col-sm-4 well" data-step="7" data-intro="text step 7" data-position='bottom'>element 7</div>
  <div class="col-sm-4 well" data-step="8" data-intro="text step 8" data-position='bottom'>element 8</div>
  <div class="col-sm-4 well" data-step="9" data-intro="text step 9" data-position='bottom'>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(){
	introJs().start(); 
})