JSFiddle - React, Tailwind, and code Playground

by mikehomme

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hopscotch/0.2.3/css/hopscotch.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/hopscotch/0.2.3/js/hopscotch.min.js"></script>
<div class="step" id="step1">Step 1</div>
<div class="step" id="step2">Step 2</div>
<div class="step" id="step3">Step 3</div>
<div class="step" id="step4">Step 4</div>
<div class="step" id="step5">Step 5</div>
<div class="step" id="step6">Step 6</div>

CSS

.step {
    padding:30px;
    margin-bottom:10px;
    border:1px solid #aaa;
}

JavaScript

$(function() {
   // Define the tour!
    var tour = {
      id: "tour-example",
      steps: [
        {
          title: "My Header",
          content: "This is the header of my page.",
          target: "#step1",
          placement: "bottom"
        },
        {
          title: "Step 2",
          content: "Here is where I put my content.",
          target: "#step2",
          placement: "bottom"
        },
        {
          title: "Step 3",
          content: "Here is where I put my content.",
          target: "#step3",
          placement: "bottom"
        },
        {
          title: "Step 4",
          content: "This is the header of my page.",
          target: "#step4",
          placement: "bottom"
        },
        {
          title: "Step 5",
          content: "Here is where I put my content.",
          target: "#step5",
          placement: "bottom"
        },
        {
          title: "Step 6",
          content: "Here is where I put my content.",
          target: "#step6",
          placement: "bottom"
        }          
      ]
    };

    // Start the tour!
    hopscotch.startTour(tour);
    setInterval(function () { hopscotch.nextStep() }, 3000);    
});