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; cursor: crosshair; display: block; "><div class="rotatetip"></div></div>
    <div id="moveable_1" style="cursor: pointer; display: inline-block; z-index: 1; position: relative; left: 0px; top: 0px; "><img  id="image_1" item_id="137" width="325" height="431" src="http://s3.amazonaws.com/dev-img.cd1.inspirationbug.com/items/137/original/lweexnod1335729680897.png" style="display: inline; width: 176px; height: 235px;"></div></div>


<div id="resizable_2" style="display: inline-block; z-index: 1; width: 176.64429530201343px; height: 235px; -webkit-transform: rotate(0deg); " ><div id="rotate_1" style="visibility: inherit; cursor: crosshair; display: block; "><div class="rotatetip"></div></div><div id="moveable_1" style="cursor: pointer; display: inline-block; z-index: 1; position: relative; left: 0px; top: 0px; "><img  id="image_1" item_id="137" width="325" height="431" src="http://s3.amazonaws.com/dev-img.cd1.inspirationbug.com/items/137/original/lweexnod1335729680897.png" style="display: inline; width: 176px; height: 235px; "></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: 'sw,n,e,w,s',
                       
        start: function(event, ui){
                console.log(ui)
           
         
            
        },
        resize: function(event, ui){
            
            
        },
        stop: function(event, ui){
            $(this).find("img").width($(this).width()).height($(this).height());
        }
});


$( "#resizable_2" ).resizable({
                 aspectRatio: true,
                   handles: 'ne, se, sw, nw',
                       
        start: function(event, ui){
                console.log(ui)
           
         
            
        },
        resize: function(event, ui){
            
            
        },
        stop: function(event, ui){
                    
            $(this).find("img").width($(this).width()).height($(this).height());
        }
    });

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