JSFiddle - React, Tailwind, and code Playground

HTML

<button id="addBox">add a grey box</button>
<button id="addContainer">Container</button>
<div id="canvas"></div>

CSS

.grey-box { 
    width: 150px; 
    height: 150px; 
    padding: 0.5em; 
    background-color:grey;
}
body{
    background-color:#CCC;
}

#multiselectbox{
    opacity:0.3;
    background-color:#00BFFF;
    position:absolute;
    z-index:100;
}
#canvas{
    width:100%;
    height:900px;
    background-color:white;
}
.container { 
    width: 150px; 
    height: 400px; 
    padding: 0.5em; 
    background-color:#EEE;
    overflow:hidden;
}

.ui-resizable { position: relative;}

.ui-resizable-handle { 
    position: absolute;
    font-size: 0.1px;
    z-index: 99999; 
    display: block; 
        border-style:solid;
    border-width:1px;
    box-sizing:border-box;
    background-color:white;
    opacity:0.3;
}

.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }

.ui-resizable-n { 
    cursor: n-resize; 
    height: 10px; width: 10px; 
    top: 0px; 
    left: 50%; 
    margin-left:-5px;
}

.ui-resizable-s { 
    cursor: s-resize; 
    height: 10px; 
    width: 10px; 
    bottom: 0px; 
    left: 50%;
    margin-left:-5px;
}
.ui-resizable-e { 
    cursor: e-resize;
    width: 10px; 
    right: 0px; 
    top: 50%; 
    height: 10px; 
    margin-top:-5px;
}
.ui-resizable-w { 
    cursor: w-resize; 
    width: 10px; 
    left: 0px; 
    top: 50%; 
    height: 10px; 
    margin-top:-5px;
}

.ui-resizable-se , .ui-resizable-sw ,.ui-resizable-nw , .ui-resizable-ne {
    border-style:solid;
    border-width:1px;
    box-sizing:border-box;
    background-color:white;
    opacity:0.3;
}


.ui-resizable-se { 
    cursor: se-resize; 
    width: 10px; 
    height: 10px; 
    right: 0px; 
    bottom: 0px; 
}
.ui-resizable-sw { 
    cursor: sw-resize; 
    width: 10px; 
    height: 10px; 
    left: 0px; 
    bottom: 0px; 
}
.ui-resizable-nw { 
    cursor: nw-resize; 
    width: 10px; 
    height: 10px; 
    left: 0px; 
    top: 0px; 
}
.ui-resizable-ne { 
    cursor: ne-resize; 
    width: 10px; 
    height: 10px; 
    right:...

JavaScript

$("#addContainer").click(function(){
    $("<div>")
        .addClass("container object")
        .appendTo("#canvas")
        .draggable()
        .resizable({
            handles:"all",
            autoHide:true
        }).droppable({
            drop:function(e,ui){
                $(ui.draggable)
                    .detach()
                    .appendTo($(this))
                    .draggable("option","containment",$(this) );
            }
        });
});

$("#canvas")
    .bind("mousedown",function(e){
        var oriX = e.pageY,
            oriY= e.pageX;
        console.log("oriX:"+oriX+",oriY"+oriY);

        
        $(this).bind("mousemove" ,function(e){
                console.log("oriX:"+oriX+",oriY"+oriY);
                console.log("pageX:"+e.pageX+" ,pageY:"+ e.pageY)
                console.log("e.pageX - oriX:"+(e.pageX - oriX));
                console.log("e.pageY - oriY:"+(e.pageY - oriY));
                $("#multiselectbox").css({
                    width: e.pageX - oriX,
                    height: e.pageY - oriY
                });
        });
    })
    .bind("mouseup",function(){

        $(this).unbind("mousemove");
        $("#multiselectbox").remove();
    })
    .delegate(".object","mousedown", function(e){
        e.stopPropagation();
    });


$("#addBox").click(function(){
    $("<div>")
        .addClass("grey-box object")
        .appendTo("#canvas")
        .draggable()
        .resizable({
            handles:"all",
            autoHide:true
        });
});