JSFiddle - React, Tailwind, and code Playground

HTML

<div id="canvas">
    <div class="elemContainer ui-selected" style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px;">
        <div class="elem" style="position: absolute; width: 100%; height: 100%; background: pink;"></div>
    </div>
    <div class="elemContainer ui-selected" style="position: absolute; top: 175px; left: 175px; width: 100px; height: 100px;">
        <div class="elem" style="position: absolute; width: 100%; height: 100%; background: Coral;"></div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
body, html {
    height: 100%;
}
#canvas {
    width: 100%;
    height: 100%;
}
.elemContainer.ui-selected {
    outline: 1px solid blue;
}
.ui-resizable-handle {
    visibility: hidden;
}
.ui-selected .ui-resizable-handle {
    visibility: visible;
}
.ui-resizable-handle {
    width: 6px;
    height: 6px;
    background: #fff;
    border: 1px solid blue;
    z-index: 100000;
}
.ui-resizable-n {
    top: -4px;
    left: 50%;
    margin-left: -3px;
    cursor: ns-resize;
}
.ui-resizable-ne {
    top: -4px;
    right: -4px;
    cursor: nesw-resize;
}
.ui-resizable-e {
    top: 50%;
    right: -4px;
    margin-top: -3px;
    cursor: ew-resize;
}
.ui-resizable-se {
    bottom: -4px;
    right: -4px;
    cursor: nwse-resize;
}
.ui-resizable-s {
    bottom: -4px;
    left: 50%;
    margin-left: -3px;
    cursor: ns-resize;
}
.ui-resizable-sw {
    bottom: -4px;
    left: -4px;
    cursor: nesw-resize;
}
.ui-resizable-w {
    left: -4px;
    top: 50%;
    margin-top: -3px;
    cursor: ew-resize;
}
.ui-resizable-nw {
    top: -4px;
    left: -4px;
    cursor: nwse-resize;
}

JavaScript

function shiftClickSelectable(s) {
    s.toggleClass("ui-selected");
}

$('#canvas').selectable({
    selected: function (event, ui) {
        if ($(ui.selected).hasClass('ui-selected')) {
            $(ui.selected).removeClass('ui-selected');
        } else {
            $(ui.selected).addClass('ui-selected');
        }
    },
    unselected: function (event, ui) {
        $(ui.unselected).removeClass('ui-selected');
    }
});

$('.elemContainer').draggable({
    start: function(event, ui) {
        $(this).addClass('ui-selected');
    }
});

$('.elemContainer').click(function (e) {
    if (e.shiftKey) {
        shiftClickSelectable($(this));
    } else {
        if (!$(this).hasClass("ui-selected")) {
            $(this).addClass("ui-selected").siblings().removeClass("ui-selected");
        }
    }
});