JSFiddle - React, Tailwind, and code Playground

JavaScript

Ext.onReady(function(){
	
	var childItems = [], items = [];
    for (i = 0; i < 9; ++i) {
        childItems.push({
            xtype: 'container',
            width: 50,
            height: 50,
            html: i + '',
            style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
            listeners: {
                'afterrender': function(panel) {
                    panel.el.on('click', function(e,t) {
                        panel.el.setStyle('background','red');
                        panel.update('Change');
                        panel.ownerCt.ownerCt.items.each(function(op){ 
                            op.items.each(function(p){ 
                                if(panel.el.id != p.id) 
                                    p.el.setStyle('background','white'); 
                            })
                        }, this)
                    });
                 }
            }
        });
    }
    for (i = 0; i < 9; ++i) {
        items.push({
            xtype: 'container',
            layout: {
                type: 'table',
                columns: 3
            },
            style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
            items: childItems
        });
    }
    Ext.create('Ext.container.Container', {
        layout: {
            type: 'table',
            // The total column count must be specified here
            columns: 3
        },
        renderTo: Ext.getBody(),    
        style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px', margin: '30px'},
        items: items
    });

});