JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css">
<div id="foo">Hello</div>
<button id="transform">transform</button>
<div id="box">
</div>

CSS

#foo {
    border: 2px solid red;
    width: 400px;
    height: 150px;
    position: absolute;
    top: 150px;
    left: 50px;
    border-top: 2px solid green;
   
}
#box {
  border: 1px solid blue;
  position: absolute;
}

JavaScript

$(function() {
    var $foo = $('#foo').resizable().draggable();

    var angle = 40; //(deg)
    

    $('#transform').on('click', function() {
        /* starting calculation */
        $foo.css({
            '-moz-transform': 'rotate(' + angle + 'deg)',
            '-webkit-transform': 'rotate(' + angle + 'deg)',
            '-ms-transform': 'rotate(' + angle + 'deg)'
        });
        var boundRect=$foo[0].getBoundingClientRect();
        
        $foo.css({
            '-moz-transform': 'rotate(0deg)',
            '-webkit-transform': 'rotate(0deg)',
            '-ms-transform': 'rotate(0deg)'
        });   
        var xDiff= (boundRect.width - $foo.width())/2;
        var yDiff= (boundRect.height - $foo.height())/2;
        console.log(boundRect);
        
        jQuery('#box').css({
        top: boundRect.top+'px',
        height: boundRect.height+'px',
        left: boundRect.left+'px',
        width: boundRect.width+'px'
        });
        
        /* now apply proper transformation */
        /*$foo.css({
            '-moz-transform': 'translate(' + xDiff + 'px, ' + yDiff + 'px) rotate(' + angle + 'deg)',
            '-webkit-transform': 'translate(' + xDiff + 'px, ' + yDiff + 'px) rotate(' + angle + 'deg)',
            '-ms-transform': 'translate(' + xDiff + 'px, ' + yDiff + 'px) rotate(' + angle + 'deg)'
        });*/
        
      $foo.css({
            '-moz-transform': 'rotate(' + angle + 'deg)',
            '-webkit-transform': 'rotate(' + angle + 'deg)',
            '-ms-transform': 'rotate(' + angle + 'deg)'
        });
    });
});