JSFiddle - React, Tailwind, and code Playground

by Yaser Mehraban

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour-standalone.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour-standalone.js"></script>
<body class="top-navigation">
   <div id="wrapper">
      <div id="page-wrapper">
        <div class="row border-bottom">
          <nav class="navbar navbar-static-top">
             <div class="navbar-header">
               <a href="/">
                 <img class="navbar-brand" alt="image" src="logo.png" />
               </a>
               <form class="navbar-form-custom" action="/profiles" accept-charset="UTF-8" method="get">
                  <input type="text" name="q" id="top-search" class="form-control"/>
               </form>    
             </div>

         <ul class="nav navbar-top-links navbar-right">
              <li>
                <a class="coach-dashboard" href="/dashboard">
                  <i class="fa fa-dashboard"></i> My Dashboard
                </a>              
              </li>
              <li>
                <a class="my-favorites" href="/profiles?filter=favorites">
                    <i class="fa fa-list"></i> My Favorites
                </a>              
              </li>
          <li>
            <a class="settings" href="/users/registration/edit">
              <i class="fa fa-sliders"></i> My Settings
            </a>          
          </li>
         </ul>
        </nav>
       </div>

      <div class="row wrapper border-bottom gray-bg page-heading">
        <h2>
          <span class="num-players">14 Players - Tryouts One</span>
        </h2>
      </div>

  <div class="wrapper wrapper-content">
    <div class="row">
     <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
      <div class="contact-box profile-24">
        <a href="/profiles/24">
          <div class="col-lg-offset-1...

JavaScript

$(document).ready(function() {
var tour = new Tour({
      storage: false,
      backdrop: true,
      steps: [
      {
        element: "div.navbar-header input#top-search",
        title: "Search",
        content: "Here you can search for players by their name, school, positions & bib color (that they wore in our tournament)"
      },
      {
        element: "div.page-heading span.num-players",
        title: "Number of Players",
        content: "This is the number of players that are in our database for this Tournament"
      },
      {
        element: '#page-wrapper div.contact-box.profile-24',
        title: "Player Info",
        content: "Here we have a quick snapshot of the player stats"
      }
    ]});

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();
});