JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

<div id="root">
    <div class="on">
        <div class="off">
            <div class="on">
                <div class="off">
                    <div class="on">
                        <div class="off">
                            <div class="on">
                                <div class="off">
                                    <div class="on">
                                        <div class="off">
                                            <div class="on">
                                                <div class="off">
                                                    <div class="on">
                                                        <div class="off">
                                                            <div class="on">
                                                                <div class="off">
                                                                    <div class="on">
                                                                        <div class="off"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="off">
                                                    <div class="on">
                                                        <div class="off">
                                                            <div class="on">
                                                                <div class="off">
                                                                    <div class="on">
                                                                        <div class="off"></div>
                                     ...

CSS

div.on, div.off {
    min-height: 50px;
    padding: 5px;
    border: 1px solid gray;
}
.on {
    background: lime;
}
.off {
    background: darkgray;
}

JavaScript

function compile(node, fn) {
    var fns = [function (){
        fn(node);
    }];
    var n = node.firstChild;
    while(n) {
        fns.push(compile(n, fn));
        n = n.nextSibling;
    }
    return function() {
        for(var i = 0; i < fns.length; i++) {
            fns[i]();
        }
    };
}

var root = document.getElementById('root');

function toggle(node) {
    node.className = node.className === 'on' ? 'off' : 'on';
}

var c = compile(root, toggle);

setInterval(c, 1000);