JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/Mtillmann/mootools-canvas-lib/raw/master/mcl-min.js"></script>
<canvas id="canvas" width=400 height=400></canvas>

JavaScript

CANVAS.init({ canvasElement : 'canvas', interactive : true });

    var itemlayer = CANVAS.layers.add({ id : 'items' });

    for(var j = 0; j < 5; j++)
    {
    for(var i = 0; i < 5; i++)
    {
        
        itemlayer.add({
           
            id : 'item-'+i + '-' + j,
            x : 51 * i,
            y : 51 * j,
            w : 50,
            h : 50,
            state : 'normal',
            interactive : true, //although they have no interactive events!
            colors : { normal : '#f00', hover : '#00f' },
            events : {
                onDraw : function(ctx){
                    
                        ctx.fillStyle = this.colors[this.state];
                        ctx.fillRect(this.x,this.y,this.w,this.h);
                    
                        this.setDims(this.x,this.y,this.w,this.h);
                }
            }
            
        });
        
        
    }

    }

    CANVAS.addThread(new Thread({
                id : 'myThread',
                onExec : function(){
                        CANVAS.clear().draw();
                }
        }));