JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<!-- The dynamic image used is 400 width and 200 height and is set in the CSS. -->
<div id="rotateDiv" style="overflow:hidden;"><img src="http://lorempixel.com/400/200/sports" /></div>

<br /><br /><br /><br /><br /><br /><br />
<div style="text-align:center;"><label id="status" class ="ready">STATUS</label></div>

<!-- Provide visual indication of rotated Top and Left positons -->
<div id="positionDataTop">&nbsp;&nbsp;Top: </div>
<div id="positionDataLeft">&nbsp;&nbsp;Left: </div>
<div id="showAngle">&nbsp;&nbsp;Deg: 0 </div>
<div id="resizeDiv"></div>

<!-- For demo only - Manual Rotatation Helper -->
<div class="demo">
  <div id="slider"></div>
</div>

CSS

#rotateDiv{
  width: 400px;
  height: 200px;
  border:2px black solid;
  text-align:center;
  left:100px;
  top:50px;
  position:relative;
}
 
/* Style for jQuery UI slider only */
.demo{
  position: relative;
  margin-left: 25px;
  margin-top: 10px;
  width: 500px;
}

#demo-frame > div.demo { 
  padding: 10px !important;
};
#status{
    width:50px;height:50px;
 }
#resizeDiv {
width: 100px;
height: 100px;
background-color: rgba(0,0,0,0.5);
top: 10px;
left: 10px;
margin-top: 100px;
margin-left: 200px;
position:absolute;
border:1px yellow dashed;
}
.ready{
    background:green;
}
.error{
    background:red;
}

JavaScript

$(document).ready(function() {
    $('#resizeDiv').draggable().resizable();
    $('#resizeDiv').resizable({
        start: function(e, ui) {
            isCropValid() ? $("#status").removeClass("error").addClass("ready"):$("#status").removeClass("ready").addClass("error");
        },
        resize: function(e, ui) {
         isCropValid()?$("#status").removeClass("error").addClass("ready"): $("#status").removeClass("ready").addClass("error");
        },
        stop: function(e, ui) {
          isCropValid() ? $("#status").removeClass("error").addClass("ready"): $("#status").removeClass("ready").addClass("error");
        }
    });
    
    $('#resizeDiv').draggable({
        start: function(e, ui) {
            isCropValid() ? $("#status").removeClass("error").addClass("ready"):$("#status").removeClass("ready").addClass("error");
        },
        drag: function(e, ui) {
         isCropValid()?$("#status").removeClass("error").addClass("ready"): $("#status").removeClass("ready").addClass("error");
        },
        stop: function(e, ui) {
          isCropValid() ? $("#status").removeClass("error").addClass("ready"): $("#status").removeClass("ready").addClass("error");
        }
    });

    // The function: Return an object with full width/height (including borders), top/bottom coordinates.
    var getPositionData = function(el) {
        return $.extend({
            width: el.outerWidth(false),
            height: el.outerHeight(false)
        }, el.offset());
    };

    // Dynamic slider with updates
    $("#slider").slider({

        min: 0,
        max: 360,
        value: 0,
        slide: function(event, ui) {

            var rotateCSS = "rotate(" + ui.value + "deg)";

            $('#rotateDiv img').css({
                '-moz-transform': rotateCSS,
                '-webkit-transform': rotateCSS,
                '-ms-transform': rotateCSS,
                '-o-transform': rotateCSS
            });

            // Save all the value of  width, height,...