JSFiddle - React, Tailwind, and code Playground

by remguif

HTML

<div id="examples">
            <input type="button" value="Button"/>

            <select>
                <option value="">- Select -</option>
                <option value="0">No</option>
                <option value="1">Yes</option>
            </select>

            <label><input type="checkbox" /> Awesome? </label>
            <input type="radio" name="foo" />
            <input type="radio" name="foo" />

            <input type="text" />
            <p>
                <label>Duration:</label>
                <input type="text" value="5" id="seconds" />
                <input type="button" value="Record" id="start" />
                <input type="button" value="Replay" id="replay" />
            </p>
            <label>Session:</label>
            <p>
                <textarea id="export" rows="18" cols="120" style="font-size: 11px;"></textarea>
            </p>
            <label>Log:</label>
            <p>
                <textarea id="log" rows="5" cols="120" style="font-size: 11px;"></textarea>
            </p>
        </div>

CSS

#event-playback-cursor {
  display: none;
  position: absolute;
  z-index: 90;
  width: 22px;
  height: 22px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAACXBIWXMAAAsSAAALEgHS3X78AAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAABfUlEQVR42mL4//8/AzKOjY39z8DAwA3ErOhy6BgGsMkBBBATAxYANPwLkBJnZGRkZSATAAQQVoMXLVoEMvwxJYYDBBATLglKDQcIICZ8kpQYDhBATIQUkGs4QAAxEaOIHMMBAoiJWBeQajhAADGREm6kGA4QQEykxjay4aBMhEsdQACxEGtgXFwceiZ6vHjxYlkg8yUQ/0ZXDxBALIQMA7kQBoAGhQCpr1CDfkGzPhs2gwECiAFbWQEC0DIjGMZHEjMCYhkgFgNiAVxlCkAAseByKdR1r7BIg8L1C1DzB2AE4vQtQAAx4CjdbKEY7DIsrlZEjjhsLgYIIAwXA10qCI3xr9CIwQZAwfAeiD/gcjBAAGErY1nRy2NQWOJzNTYXAwQQExaLfgPxVxCNJPwVh6u5cTkYIICISscgS4ARJQj1PgzwQJMaVgAQQIzIVQxYAHdMs0LDXhpqKMiSe6BwRjcDBAACiBSDkcOfDZpBwJkFm8EAAcSITZAaACDAAGEiJMT0Q2k9AAAAAElFTkSuQmCC) 0 0 no-repeat;  
}
#event-playback-cursor .disc {
  display: none;
  z-index: 80;
  margin: -18px 0 0 -18px;
  padding: 0;
  width: 44px;
  height: 44px;
  opacity: 0.30;
  background:...

JavaScript

$(function () {
    $('input[value=Button]').click(function () {
        $(this).attr('value', 'Pressed');
    })

            .hover(function () {
                $(this).css('font-weight', 'bold');
            }, function () {
                $(this).css('font-weight', 'normal');
            });

    log = function (message) {
        $('#log').val($('#log').val() + "\n" + message);
    };

    $('#replay').click(function () {
        log('Started playback');
        session = eval($('#export').val());
        $.playbackEvents(session, {interval: 20, finished: function () {
                log('Finished playback');
            }});
    });

    $('#start').click(function () {
        $('#log').val('');
        $('#export').val('');
        duration = parseInt($('#seconds').val()) * 1000;
        log('Started recording: ' + duration + 'ms');
        $.recordEvents({duration: duration}, function () {
            $('#export').val(this.exportJSON());
            log('Finished recording');
        });
    });

});

// the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, document, undefined ) {

		// undefined is used here as the undefined global variable in ECMAScript 3 is
		// mutable (ie. it can be changed by someone else). undefined isn't really being
		// passed in so we can ensure the value of it is truly undefined. In ES5, undefined
		// can no longer be modified.

		// window and document are passed through as local variable rather than global
		// as this (slightly) quickens the resolution process and can be more efficiently
		// minified (especially when both are regularly referenced in your plugin).

		// Create the defaults once
		var pluginName = "defaultPluginName",
				defaults = {
				propertyName: "value"
		};

		// The actual plugin constructor
		function Plugin ( element, options ) {
				this.element = element;
				// jQuery has an...