JSFiddle - React, Tailwind, and code Playground

by Noseratio

HTML

<pre id="output"></pre>

JavaScript

// http://stackoverflow.com/q/18826570/1768303

(function () {
    "use strict";
    var i = 0;
    var timeouts = {};
    var setApiName = "setTimeoutMC";
    var clearApiName = "clearTimeoutMC";

    var channel = null;
    try {
        channel = new MessageChannel();
    }
    catch(e) {
        return;
    }

    function post(fn) {
        if (i === 0x100000000) // max queue size
            i = 0;
        if (++i in timeouts)
            throw new Error(setApiName + " queue overflow.");
        timeouts[i] = fn;
        channel.port2.postMessage(i);
        return i;
    }

    channel.port1.onmessage = function (ev) {
        var id = ev.data;
        var fn = timeouts[id];
        if (fn) {
            delete timeouts[id];
            fn();
        }
    }

    function clear(id) {
        delete timeouts[id];
    }

    channel.port1.start();
    channel.port2.start();

    window[setApiName] = post;
    window[clearApiName] = clear;
})();

// setTimeoutPM via window.postMessage

(function () {
    "use strict";
    var i = 0;
    var timeouts = {};
    var setApiName = "setTimeoutPM";
    var clearApiName = "clearTimeoutPM";
    var messageName = setApiName + new Date().getTime();

    function post(fn) {
        if (i === 0x100000000) // max queue size
            i = 0;
        if (++i in timeouts)
            throw new Error(setApiName + " queue overflow.");
        timeouts[i] = fn;
        window.postMessage({ type: messageName, id: i }, "*");
        return i;
    }

    function receive(ev) {
        if (ev.source !== window)
            return;
        var data = ev.data;
        if (data && data instanceof Object && data.type === messageName) {
            ev.stopPropagation();
            var id = ev.data.id;
            var fn = timeouts[id];
            if (fn) {
                delete timeouts[id];
                fn();
            }
        }
    }

    function clear(id) {
        delete timeouts[id];
    }

   ...