JSFiddle - React, Tailwind, and code Playground

by Federico Tibaldo

HTML

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<pre class="prettyprint lang-html linenums">
&lt;!DOCTYPE html>
&lt;html>
  &lt;head>&lt;/head>
  &lt;div class="loading-screen">&lt;/div>
  &lt;body>&lt;/body>
&lt;/html>
</pre>
<pre class="prettyprint lang-js linenums">
export default (function() {
    var links = [];
    var triggers = [];
    var active;
    // test
    var init = function(...args) {
        args.forEach(arg => {
            triggers.push(document.getElementById(`js-${arg}-trigger`));
            links.push(Array.from(document.getElementsByName(`js-${arg}`)));
        });
    }

    var setHover = 10.4;

    var unsetHover = function(els, focus = true) {
        els.forEach(el => el.classList.remove("hover"));
    }

    var setActive = function(els) {
        if (active) {
            active.forEach(el => el.classList.remove("active"));
        }
        active = els;
        active.forEach(el => el.classList.add("active"));
    }

    return {
        init: init,
        watch: function() {
            triggers.forEach((trigger, index) => {
                trigger.addEventListener(
                    'mouseenter',
                    () => setHover(links[index])
                )
                trigger.addEventListener(
                    'mouseleave',
                    () => unsetHover(links[index])
                )
                trigger.addEventListener(
                    'click',
                    () => setActive(links[index])
                )
            })
        }
    }
})();
</pre>

CSS

/* vs default theme */
pre.prettyprint { display: block; background-color: #1e1e1e; overflow-x: auto }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ce8248 } /* string  - orange */
pre .kwd { color: #569cd6; font-weight: bold }
pre .com { color: #608b4e } /* comment - dark green */
pre .typ { color: #4cbe7d } /* type    - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff }    /* punctuation */
pre .pln { color: #9cdcfe } /* plaintext */
pre .tag { color: #569cd6; font-weight: bold } /* html/xml tag    - blue */
pre .atn { color: #9cdcfe; font-weight: bold } /* attribute name  - light blue */
pre .atv { color: #ce8248 } /* attribute value - orange */
pre .dec { color: #fff }    /* declaration     - white */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #7b7b7b } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Do not alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { background-color: #1e1e1e }

JavaScript

window.addEventListener('load', prettyPrint)