JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<!-- guider.js requires jQuery as a prerequisite. Be sure to load guider.js AFTER jQuery. -->
<script type="text/javascript" src="http://jeffpickhardt.com/guiders/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://jeffpickhardt.com/guiders/guider.js"></script>
<link rel="stylesheet" href="http://jeffpickhardt.com/guiders/guider.css" type="text/css" />
</head>
<body>
<span id="clock" style="border: 2px solid #333; width: 300px; height: 200px; text-align: center;" onclick="guider.next();">
<br />
<img src="clock.gif" width=150 height=150 />
</span>
<script type="text/javascript">
/**
* Guiders are created with guider.createGuider({settings}).
*
* You can show a guider with the .show() method immediately
* after creating it, or with guider.show(id) and the guider's id.
*
* guider.next() will advance to the next guider, and
* guider.hideAll() will hide all guiders.
*
* By default, a button named "Next" will have guider.next as
* its onclick handler. A button named "Close" will have
* its onclick handler set to guider.hideAll. onclick handlers
* can be customized too.
*/
guider.createGuider({
buttons: [{name: "Next"}],
description: "Guiders are a user interface design pattern for introducing features of software. This dialog box, for example, is the first in a series of guiders that together make up a guide.",
id: "first",
next: "second",
overlay: true,
title: "Welcome to Guiders.js!"
}).show();
/**
* .show() means that this guider will get shown immediately after creation.
*
* Using .show() is one way of starting your guiders.
*
* Another way is by directing the user to a special URL with the guider id in
* its hash tag, such as:
*
* http://www.local.com/README.html#guider=first
*
* This makes it easy to only...