JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<script src="https://raw.githubusercontent.com/jwarby/jquery-pagewalkthrough/master/dist/jquery.pagewalkthrough.min.js"></script>
<div id="reference1">Test Area</div>

CSS

#jpwClose,#jpwNext,#jpwPrevious,#jpwFinish{color:#00c7ff;cursor:pointer;font-family:'GochiHand';font-size:18px;font-weight:lighter}#jpwOverlay{background:rgba(0,0,0,0.6);position:fixed;z-index:999999;top:0;width:100%;height:100%;display:block}#jpwOverlay.transparent{background:none}#jpWalkthrough.jpw-scrolling .overlay-hole>div{box-shadow:inset 0 0 10px 1000px rgba(0,0,0,0.6)}#jpWalkthrough .overlay-hole>div{box-shadow:inset 0 0 10px 10px rgba(0,0,0,0.6)}#jpWalkthrough #jpwTooltip{overflow:visible;padding:10px;background:none}#jpWalkthrough #jpwTooltip #tooltipWrapper{overflow:visible}#jpWalkthrough #jpwTooltip #bottom-scratch{background:url("images/scratch-border.png") no-repeat left top;width:358px;height:42px;display:block;top:25px;clear:both}#jpWalkthrough #jpwTooltip .draggable-area{display:block;width:44px;height:40px;position:absolute;top:-35px;right:-30px;background:url("images/drag.png") no-repeat;z-index:10000}#jpWalkthrough #jpwTooltip .top{background:url("images/arrow-bottom.png") no-repeat scroll 0 0 transparent;bottom:-86px;height:86px;left:130px;position:absolute;width:75px;display:block;z-index:1000}#jpWalkthrough #jpwTooltip .right{background:url("images/arrow-left.png") no-repeat scroll 0 0 transparent;height:56px;left:-105px;position:absolute;top:35px;width:105px;display:block;z-index:1000}#jpWalkthrough #jpwTooltip .bottom{background:url("images/arrow-top.png") no-repeat scroll 0 0 transparent;height:86px;left:130px;position:absolute;top:-86px;width:75px;display:block;z-index:1000}#jpWalkthrough #jpwTooltip .left{background:url("images/arrow-right.png") no-repeat scroll 0 0 transparent;height:56px;position:absolute;right:-105px;top:35px;width:105px;display:block;z-index:1000}#jpWalkthrough #jpwTooltip #tooltipInner{font-family:'GochiHand';color:#fff;text-align:center;font-size:22px}#jpWalkthrough #jpwTooltip #tooltipInner a{font-size:22px}#jpWalkthrough #jpwTooltip #tooltipInner .tooltipTitle{font-size:40px}#jpWalkthrough...

JavaScript

var tutorial = {
  /* Array of steps to show
   */
  steps: [
    {
      // jQuery selector for the element to highlight for this step
      wrapper: '',
      // ##### <a name="popup-options">Popup options</a>
      popup: {
        content: 'Test this out',
        // Popup type - either modal, tooltip or nohighlight.
        // See [Popup Types](/pages/popup-types.html)
        type: 'modal',
        // Position for tooltip and nohighlight style popups - either top,
        // left, right or bottom
        position: 'top',
        // Horizontal offset for the walkthrough
        offsetHorizontal: 0,
        // Vertical offset for the walkthrough
        offsetVertical: 0,
        // Default width for each popup
        width: '320',
        // Amount in degrees to rotate the content by
        contentRotation: 0,
        // If set to 'skip', skips tooltip/nohighlight types when the wrapper
        // does not exist. If set to anything else, uses the value as a fallback
        // popup type (e.g. 'modal' will fallback to a popup type of 'modal').
        fallback: 'skip'
      },
      // Automatically scroll to the content for the step
      autoScroll: true,
      // Speed to use when scrolling to elements
      scrollSpeed: 1000,
      // Prevent the user from scrolling away from the content
      lockScrolling: false,
      // Callback when entering the step
      onEnter: null,
      // Callback when leaving the step
      onLeave: null
    },
      {
          wrapper: '#reference1',
          popup: {
              content: 'Another test step',
              type: 'modal'
          }
      },
      {
          popup: {
              content: 'Thats it, your ready!',
              type: 'modal'
          }
      }
  ],
  // **(Required)** Walkthrough name.  Should be a unique name to identify the
  // walkthrough, as it will
  // be used in the cookie name
  name: 'firstRun',
  // Automatically show the walkthrough when the page is loaded.  If multiple
...