JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

<div id="test"></div>

CSS

#test {
    background: #ccc;
    width: 100%;
    height: 100%;
}
html, body {
    width: 100%;
    height: 100%;
}

JavaScript

(function (window) {
    function bind(elem, eventName, handler) {
        elem.addEventListener(eventName, handler);
        return function () {
            elem.removeEventListener(eventName, handler);
        };
    }

    var keys = {
        8: 'BACK',
        13: 'ENTER',
        16: 'SHIFT',
        17: 'CTRL',
        18: 'ALT',
        32: 'SPACE',
        37: 'LEFT',F
        39: 'RIGHT',
        38: 'UP',
        40: 'DOWN',
        46: 'DEL'
    };

    function ch(code) {
        return keys[code] || upper(String.fromCharCode(code));
    }

    function upper(c) {
        return !c ? '' : c.toUpperCase();
    }

    function KeyState() {
        this.toString = function () {
            var r = [];
            for (var i in this) {
                if (this.hasOwnProperty(i) && this[i] === true) {
                    r.push(i);
                }
            }
            return r.sort().join('+');
        };
    }

    function monKeys(elem, mappings) {

        if (!elem.monKeys) {
            elem.monKeys = {
                state: new KeyState()
            };
            elem.monKeys.kill = (function () {
                var killFns = [];
                killFns.push(bind(elem, 'keydown', function (e) {
                    var state = elem.monKeys.state;
                    state[ch(e.keyCode)] = true;
                    var stateStr = state.toString();
                    if (elem.monKeys.prevState !== stateStr) {
                        //change!
                        var handlers = elem.monKeys.handlers,
                            trigger = handlers[stateStr];
                        if (trigger) {
                            for (var i = 0; i < trigger.length; i++) {
                                trigger[i]();
                            }
                        }
                    }
                    elem.monKeys.prevState = stateStr;
                }));
                killFns.push(bind(elem, 'keyup', function (e) {
            ...