JSFiddle - React, Tailwind, and code Playground

by mikecmpbll

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<a href="#" id="start-tour">Start tour</a>
<div class="panel panel-default first-target">
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOne">
        <h4 class="panel-title accordion-toggle">
          Test
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">
            Test
        </div>
    </div>
</div>

<div class="next-thing">
    Point at me!
</div>

CSS

.panel-body { height: 1000px; }

JavaScript

// scroll to the bottom for the Tourist tour code!

/*! Tourist.js - http://easelinc.github.io/tourist, built 03-13-2015 */
(function(){var a,b,c,d,e={}.hasOwnProperty,f=function(a,b){function c(){this.constructor=a}for(var d in b)e.call(b,d)&&(a[d]=b[d]);return c.prototype=b.prototype,a.prototype=new c,a.__super__=b.prototype,a},g=function(a,b){return function(){return a.apply(b,arguments)}};window.Tourist=window.Tourist||{},Tourist.Model=function(b){function c(){return a=c.__super__.constructor.apply(this,arguments)}return f(c,b),c.prototype._module="Tourist",c}(Backbone.Model),window.Tourist.Tip=window.Tourist.Tip||{},Tourist.Tip.Base=function(){function a(a){this.options=null!=a?a:{},this.onClickNext=g(this.onClickNext,this),this.onClickClose=g(this.onClickClose,this),this.el=$("<div/>"),this.initialize(a),this._bindClickEvents(),Tourist.Tip.Base._cacheTip(this)}return a.prototype._module="Tourist",_.extend(a.prototype,Backbone.Events),a.prototype.skipButtonTemplate='<button class="btn btn-default btn-sm pull-right tour-next">Skip this step →</button>',a.prototype.nextButtonTemplate='<button class="btn btn-primary btn-sm pull-right tour-next">Next step →</button>',a.prototype.finalButtonTemplate='<button class="btn btn-primary btn-sm pull-right tour-next">Finish up</button>',a.prototype.closeButtonTemplate='<a class="btn btn-close tour-close" href="#"><i class="icon icon-remove"></i></a>',a.prototype.okButtonTemplate='<button class="btn btn-sm tour-close btn-primary">Okay</button>',a.prototype.actionLabelTemplate=_.template('<h4 class="action-label"><%= label %></h4>'),a.prototype.actionLabels=["Do this:","Then this:","Next this:"],a.prototype.highlightClass="tour-highlight",a.prototype.template=_.template('<div>\n  <div class="tour-container">\n    <%= close_button %>\n    <%= content %>\n    <p class="tour-counter <%= counter_class %>"><%= counter%></p>\n  </div>\n  <div class="tour-buttons">\n    <%= buttons %>\n ...