JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<div data-fields-x="60" data-fields-y="60">

</div>

CSS

div {
    position: relative;
}
div div{
    width: 1.6%;
    position: absolute;
    top:0;
    left:0;
    text-align: center;
    font-size: 0.2em;
    overflow: hidden;
}

JavaScript

var grid = {
    constants: {
        $grid : null,
        totalX: null,
        totalY: null,
        width:  null,
        height: null
    },
    grid: [],
    makeGrid: function( $grid ){
        
        var data, $model, $cloneMoel;
        
        data = $grid.data();
        grid.constants.totalX = data.fieldsX;
        grid.constants.totalY = data.fieldsY;
        
        $model = $("<div />", {"class": "gridElement"});
        
        $cloneMoel = $model.clone();
        $grid.append($cloneMoel);
        grid.constants.width = $cloneMoel.width();
        grid.constants.height = grid.constants.width;
        $cloneMoel.remove();
        
        $model.height(grid.constants.width);
        $model.width(grid.constants.width);
        
        for(var y=0; y<=data.fieldsY-1; y++){
            for(var x=0; x<=data.fieldsX-1; x++){
                               
               var $clone = $model.clone();
                                $clone.css("background","#"+Math.floor(Math.random()*16777215).toString(16));
                
                $grid.append($clone);
                
                $clone.css({
                    top: x * grid.constants.height,
                    left: y * grid.constants.width
                });

                if( !grid.grid[x] ){
                    grid.grid[x] = [y];
                }
                
                grid.grid[x][y] = $clone;
                
                $clone.text("x:" + x + " y:" + y) 
                     
            }
        }
    },
    init: function( $grid ){
        if(!$grid.length){
            return false;
        }
        
        this.constants.$grid = $grid;
        this.makeGrid($grid);
    }
};

$(function(){
    grid.init($("div:eq(0)"))
});