JSFiddle - React, Tailwind, and code Playground

by unloco

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/godswearhats/[email protected]/jquery.ui.rotatable.css">
<div id="target"></div>
<div id="clone"></div>

CSS

#target {
  width: 200px;
  height: 200px;
  background-color: #4caf50;
  
  position: absolute;
  top: 50px;
  left: 50px;
}

#clone {
  width: 200px;
  height: 200px;
  background-color: #f44336;
  
  position: absolute;
  top: 50px;
  left: 300px;
}

JavaScript

/* globals define jQuery */
(function (factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory)
  } else {
    // Browser globals
    factory(jQuery)
  }
}(function ($) {
  $.widget('ui.rotatable', $.ui.mouse, {
    widgetEventPrefix: 'rotate',

    options: {
      angle: false,       // specify an angle in radians (for backward compatability)
      degrees: false,     // specify angle in degrees
      handle: false,      // an image to use for a handle
      handleOffset: {     // where the handle should appear
        top: 0,
        left: 0
      },
      radians: false,     // specify angle in radians
      rotate: null,       // a callback for during rotation
      rotationCenterOffset: {   // offset the center of the element for rotation
        top: 0,
        left: 0
      },
      snap: false,        // boolean flag, should the element snap to a certain rotation?
      start: null,        // callback when rotation starts
      step: 22.5,         // angle in degrees that the rotation should be snapped to
      stop: null,         // callback when rotation stops
      transforms: null,   // other transforms to performed on the element
      wheelRotate: true   // boolean flag, should the element rotate when the mousewheel is rotated?
    },

    // accessor for the angle in radians
    angle: function (angle) {
      if (angle === undefined) {
        return this.options.angle
      }
      this.options.angle = angle
      this.elementCurrentAngle = angle
      this._performRotation(this.options.angle)
    },

    // calculates the element center if needed and returns it
    getElementCenter: function () {
      this.elementCenter = this._calculateElementCenter()
      return this.elementCenter
    },

    // accessor for the handle
    handle: function (handle) {
      if (handle === undefined) {
        return this.options.handle
      }
      this.options.handle =...