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;

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").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");
        }
    });
});