JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ShapeContainer">
</div>

CSS

.shape {
    border: 1px solid grey;
    width: 20px;
    height: 20px;
    position: absolute;
    padding: 5px;
}

.highliteShape {
    border: 1px solid red;
    z-index: 10000;
}

JavaScript

var maxSize = 2000;

function InitShapeEventHandler($shape){
    if(!$shape.hasClass("ui-resizable")){
         $shape.resizable({
            start: function (event, ui) {
                $(this).addClass("highliteShape");
            },
            stop: function (event, ui) {
                $(this).removeClass("highliteShape");
            }
        }).draggable({
            cursor: "move",
             start: function (event, ui) {
                $(this).addClass("highliteShape");
            },
            stop: function (event, ui) {
                $(this).removeClass("highliteShape");
            }
        });
    }
}


for(var x=0; x<maxSize; x+=35){
    for(var y=0; y<maxSize; y+=35){
        $("#ShapeContainer").append("<div class='shape' style='left:" + x + "px; top:" + y + "px;'></div>");        
    }
}




$(function() {
    // add some dummy code
    $(".shape").append("<div>x</div>");
    
    $(".shape").mouseenter(function(){
        InitShapeEventHandler($(this));
    });   
});