JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<svg></svg>

CSS

html, body {
  background-color: lightgray;
}

svg {
  background-color: white;
}

rect {
  fill: lightblue;
}

JavaScript

var rotating = false;

var RECT_WIDTH = 100,
    RECT_HEIGHT = 50;
var CTRL_WIDTH = 7,
    CTRL_HEIGHT = 7;
var CTRL_X = (CTRL_WIDTH / 2),
    CTRL_Y = (CTRL_HEIGHT / 2);

var svg = d3.select('svg');
	svg.attr('width', 500)
  .attr('height', 500);

var dragRectangle = d3.behavior.drag()
  .on('dragstart', function() {
  	var self = d3.select(this);
    if (d3.select(event.target).attr('id') == 'rotator') {
    	rotating = true;
    }
  })
  .on('drag', function() {
  	var self = d3.select(this);
    if (rotating) {
      var mainRect = self.select('#mainRect');
      var curX = parseInt(d3.transform(self.attr("transform")).translate[0]),
          curY = parseInt(d3.transform(self.attr("transform")).translate[1]);
      var curWidth = parseInt(mainRect.attr('width')),
          curHeight = parseInt(mainRect.attr('height'));  
      var curCenter = getCenter(curX, curY, curWidth, curHeight);

      var eP = {
        x: d3.event.x,
        y: d3.event.y
      };
      var newRotation = getRotation(eP, curCenter);
      self.attr('transform', 
        'translate(' + curX + ', ' + curY + ') rotate(' + newRotation + ')'
      );
    }
  })
  .on('dragend', function() {
  	var self = d3.select(this);
  	rotating = false;
  });
  
function getCenter (x, y, w, h) {
  return {
    x: (x + (w / 2)), 
    y: (y + (h / 2))
  };
}

function getRotation(eP, cP) {
  return toDegrees(Math.atan2((eP.y - cP.y), (eP.x - cP.x)));
}

function toDegrees(angle) {
  return angle * (180 / Math.PI);
}

var newGroup = svg.append('g')
	.attr('transform', 'translate(' + (250 - (RECT_WIDTH / 2)) + ', ' + (250 - (RECT_HEIGHT / 2)) + ')')
  .attr('angle', 0)
  .call(dragRectangle);
var newRect = newGroup.append('rect')
	.attr('id', 'mainRect')
	.attr('width', RECT_WIDTH) 
  .attr('height', RECT_HEIGHT)
var controllerGroup = newGroup.append('g');
var rotateController = controllerGroup.append('rect')
	.attr('id', 'rotator')
  .attr('x', ((RECT_WIDTH / 2) - CTRL_X))
  .attr('y', (-CTRL_HEIGHT *...