JSFiddle - React, Tailwind, and code Playground

by unloco

HTML

<script src="http://prestalife.net/scripts/resizable-rotation.patch.js"></script>
<a href="https://github.com/unlocomqx/jQuery-ui-resizable-rotation-patch" target="_blank">On GitHub</a>
<div id="drag">
    <div id="resize"></div>
</div>

CSS

#drag{
    position: absolute;
    top: 200px;
    left: 100px;    
}
#resize{
    background: #17DAFF;
    width: 400px;
    height: 200px;
    transform: rotate(45deg);
}

.ui-resizable-handle{
    background: #FF17DA;
    cursor: pointer;
}

.ui-resizable-se,
.ui-resizable-sw,
.ui-resizable-nw,
.ui-resizable-ne
{ background: #FFDA17; z-index: 100001 !important }

.ui-resizable-se{
    width: 9px;
    height: 9px;
    right: -5px;
    bottom: -5px;
}

JavaScript

$(function(){
    $('#drag').draggable();  
    $('#resize').resizable({
        handles: 'ne, nw, se, sw, n, w, s, e' 
    });    
});