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

$('#canvas').selectable();

$('.elemContainer').draggable();

// Fix single click selection
$(".elemContainer").click(function() {
    if (!$(this).hasClass("ui-selected")) {
        $(this).addClass("ui-selected").siblings().removeClass("ui-selected");
    }
})