JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://webfro.gs/south/dev/cloud/js/jquery.cookie.js"></script>
<script src="http://webfro.gs/south/dev/cloud/js/modernizr.mq.js"></script>
<script src="http://webfro.gs/south/dev/cloud/js/jquery.joyride-2.1.js"></script>
<ul>
    <li class="number1">First Stop</li>
        <br />
    <li class="number2">Second Stop</li>
        <br />    
    <li class="number3">Third Stop</li>
        <br />    
    <li class="number4">Fourth Stop</li>
        <br />    
</ul>




<ol id="joyRideTipContent" data-joyride>
		<!-- First Stop -->
      <li data-class="number1" data-text="Next">
        <h2>First Stop</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </li>

      <li data-class="number2" data-text="Next">
        <h2>Second Stop</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </li>

      <li data-class="number3" data-text="Next">
        <h2>Third Stop</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </li>

      <li data-class="number4" data-text="Next">
        <h2>Fourth Stop</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </li>

      <li data-button="Next">
        <h2>Modal</h2>
        <p>It works as a modal too!</p>
      </li>
</ol>

CSS

li {
    width: 150px;
    height: auto;
}


/* Artfully masterminded by ZURB */
body {
  position: relative;
}

#joyRideTipContent { display: none; }

.joyRideTipContent { display: none; }

/* Default styles for the container */
.joyride-tip-guide {
  position: absolute;
  background: #000;
  background: rgba(0,0,0,0.8);
  display: none;
  color: #fff;
  width: 300px;
  z-index: 101;
  top: 0; /* keeps the page from scrolling when calculating position */
  left: 0;
  font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", Helvetica, Arial, Lucida, sans-serif;
  font-weight: normal;
     -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
          border-radius: 4px;
}

.joyride-content-wrapper {
  padding: 10px 10px 15px 15px;
}

/* Mobile */
@media only screen and (max-width: 767px) {
  .joyride-tip-guide {
    width: 95% !important;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    left: 2.5% !important;
  }
  .joyride-tip-guide-wrapper {
    width: 100%;
  }
}


/* Add a little css triangle pip, older browser just miss out on the fanciness of it */
.joyride-tip-guide span.joyride-nub {
  display: block;
  position: absolute;
  left: 22px;
  width: 0;
  height: 0;
  border: solid 14px;
  border: solid 14px;
}

.joyride-tip-guide span.joyride-nub.top {
  /*
  IE7/IE8 Don't support rgba so we set the fallback
  border color here. However, IE7/IE8 are also buggy
  in that the fallback color doesn't work for
  border-bottom-color so here we set the border-color
  and override the top,left,right colors below.
  */
  border-color: #000;
  border-color: rgba(0,0,0,0.8);
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-width: 0;
  top: -14px;
  bottom: none;
}

.joyride-tip-guide span.joyride-nub.bottom {
  /*
  IE7/IE8 Don't support rgba so we set the fallback
  border color here. However, IE7/IE8 are also buggy
  in that the...

JavaScript

$(window).load(function() {
        $('#joyRideTipContent').joyride({
          autoStart : true,
          postStepCallback : function (index, tip) {
          if (index == 2) {
            $(this).joyride('set_li', false, 1);
          }
        },
        modal:true,
        expose: true
        });
      });