JSFiddle - React, Tailwind, and code Playground

HTML

<div id="resizable_1" style="display: inline-block; z-index: 1; width: 176.64429530201343px; height: 235px; -webkit-transform: rotate(-208.61831649096152deg); " >
    <div id="rotate_1" style="visibility: inherit; display: block; ">
    <div class="rotatetip"></div>
</div>

CSS

.ui-resizable { position: absolute; border:1px solid #ccc}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; background:black; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; background:black;}
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px;background:black; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;background:black;}

JavaScript

$( "#resizable_1" ).resizable({
       aspectRatio: true,
       handles: 'ne, se, sw, nw',
});
$( "#resizable_1" ).draggable({});

$('#resizable_1').css("left","100px").css("top","100px");