JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.hubspot.com/shepherd/bower_components/tether/dist/js/tether.js"></script>
<script src="https://2f38d42c24cf5e1a2a5243f5f326356a846de628-www.googledrive.com/host/0B1fNcXQkpXbeeXBqWnVpXzBaczA"></script>
<link rel="stylesheet" href="http://github.hubspot.com/shepherd/dist/css/shepherd-theme-default.css">
<div id="red" class="red" style="height:200px;width:200px;background:red;"></div>
<div id="blue" style="height:200px;width:200px;background:blue;"></div>
<div class="green" style="height:200px;width:200px;background:green;"></div>
<div class="purple" style="height:200px;width:200px;background:purple;"></div>

JavaScript

var tour = new Shepherd.Tour({
    defaults: {
        classes: 'shepherd-theme-default'
    }
});

tour.addStep({
    text: 'This is the first step',
    title: 'TARGET: .red',
    attachTo: {
        element: '.red',
        on: 'right'
    },
    buttons: [{
        text: 'Prev',
        action: tour.back
    }, {
        text: 'Next',
        action: tour.next
    }]
});

tour.addStep({
    text: 'This is the second step',
    title: 'TARGET: .blue',
    attachTo: {
        element: '.blue',
        on: 'right'
    },
    buttons: [{
        text: 'Prev',
        action: tour.back
    }, {
        text: 'Next',
        action: tour.next
    }],
    showOn: function () {
        return document.querySelector('#blue') ? true : false;
    }
});

tour.addStep({
    text: 'This is the third step',
    title: 'TARGET: .green',
    attachTo: {
        element: '.green',
        on: 'right'
    },
    buttons: [{
        text: 'Prev',
        action: tour.back
    }, {
        text: 'Next',
        action: tour.next
    }]
});

tour.addStep({
    text: 'This is the fourth step',
    title: 'TARGET: .purple',
    attachTo: {
        element: '.purple',
        on: 'right'
    },
    buttons: [{
        text: 'Prev',
        action: tour.back
    }, {
        text: 'Next',
        action: tour.next
    }]
});



var tour2 = new Shepherd.Tour({
    defaults: {
        classes: 'shepherd-theme-default'
    }
});

tour2.addStep({
    text: 'This is the first step',
    title: 'TARGET: #red',
    attachTo: {
        element: '#red',
        on: 'right'
    },
    buttons: [{
        text: 'Prev',
        action: tour2.back
    }, {
        text: 'Next',
        action: tour2.next
    }]
});

tour2.addStep({
    text: 'This is the second step',
    title: 'TARGET: #blue',
    attachTo: {
        element: '#blue',
        on: 'right'
    },
    buttons: [{
        text: 'Prev',
        action: tour2.back
    }, {
        text: 'Next',
        action: tour2.next
    }],
   ...