JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>

<div class="outer" > 
    <div class ="inner">
    </div> </div>

    <div class="point"></div>

CSS

.outer
{
    background-color:#CF3;
    width:400px;
    height:300px;
    top:100px;
    left:100px;
    position:relative;
}

.inner
{
  position:absolute;
  width:100px;
  height:50px;
  background-color:#CCC;
 
  top: 0px;
  left:0px;
  
 
}

.point{width:10px;
  height:10px;
  background-color:#930;
    position:absolute;
display: none;

}

JavaScript

var angle = 45;

$(document).ready(function() {
    $(".outer").each(function() {
        var j = $(this).height() / 2;
        var k = $(this).width() / 2;
        var center = {
            top: $(this).offset().top + j,
            left: $(this).offset().left + k
        };

        $(this).rotate(angle);

        
        var inner = $(this).find('.inner');

        inner.draggable({
            helper: function() {
                return $(".point").clone().appendTo("body");
            },
            cursorAt: {
                top: 0,
                left: 0
            },

            // get the initial X and Y position when dragging starts
            start: function(event, ui) {
                ui.helper.show();ui.helper.rotate(angle);

            },
            drag: function(event, ui) {
                $(this).css(transformOffset(center, {
                    top: ui.offset.top,
                    left: ui.offset.left
                }, 360 - angle, j, k));
            }
        });
    });

});

function transformOffset(center, offset, angle, j, k) {
    var rad = angle * Math.PI / 180;
    var x = offset.left - center.left;
    var y = offset.top - center.top;

    transform = {
        top: j + (x * Math.sin(rad) + y * Math.cos(rad)),
        left: k + (x * Math.cos(rad) - y * Math.sin(rad))
    }

    return transform;
}