JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="parent">
  <div class='child'>
    <img class='child2' src='https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png' />
  </div>
  <div class='child'>
    <img class='child2' src='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Wand-128.png' />
  </div>
  <div class='child'>
    <img class='child2' src='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Candy-01-128.png' />
  </div>
</div>

CSS

.parent {
  position: relative;
  overflow: hidden;
  z-index: 1;
  min-height: 200px;
  background-image: url('http://img.freepik.com/free-vector/white-canvas-background_1053-239.jpg?size=338&ext=jpg');
}

.child {
  position: absolute;
  z-index: 1;
}

.remove {
  position: absolute;
  z-index: 1000;
  top: 0px;
  right: 0px;
  display: block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-width: 3px;
  border-style: solid;
  border-color: red;
  border-radius: 100%;
  background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%, transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%, transparent 56%, transparent 100%);
  background-color: red;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.ui-rotatable-handle {
  position: absolute;
  height: 16px;
  width: 16px;
  cursor: pointer;
  background-image: url(https://cdn0.iconfinder.com/data/icons/large-black-icons/512/Rotate_right_arrow.png);
  background-size: 100%;
  left: 2px;
  bottom: 2px;
}

JavaScript

(function(c, d) {
  c.widget("ui.rotatable", c.ui.mouse, {
    options: {
      handle: !1,
      angle: !1,
      snap: !1,
      step: 22.5,
      rotationCenterX: !1,
      rotationCenterY: !1,
      start: null,
      rotate: null,
      stop: null
    },
    rotationCenterX: function(a) {
      if (a === d) return this.options.rotationCenterX;
      this.options.rotationCenterX = a
    },
    rotationCenterY: function(a) {
      if (a === d) return this.options.rotationCenterY;
      this.options.rotationCenterY = a
    },
    handle: function(a) {
      if (a === d) return this.options.handle;
      this.options.handle = a
    },
    angle: function(a) {
      if (a === d) return this.options.angle;
      this.elementCurrentAngle = this.options.angle = a;
      this.performRotation(this.options.angle)
    },
    _create: function() {
      var a;
      this.options.handle ? a = this.options.handle : (a = c(document.createElement("div")), a.addClass("ui-rotatable-handle"));
      this.listeners = {
        rotateElement: c.proxy(this.rotateElement, this),
        startRotate: c.proxy(this.startRotate, this),
        stopRotate: c.proxy(this.stopRotate, this),
        wheelRotate: c.proxy(this.wheelRotate, this)
      };
      this.element.bind("wheel", this.listeners.wheelRotate);
      a.draggable({
        helper: "clone",
        start: this.dragStart,
        handle: a
      });
      a.bind("mousedown", this.listeners.startRotate);
      a.appendTo(this.element);
      0 != this.options.angle ? (this.elementCurrentAngle = this.options.angle, this.performRotation(this.elementCurrentAngle)) : this.elementCurrentAngle = 0
    },
    _destroy: function() {
      this.element.removeClass("ui-rotatable");
      this.element.find(".ui-rotatable-handle").remove();
      this.element.unbind("wheel", this.listeners.wheelRotate)
    },
    performRotation: function(a) {
      this.element.css("transform-origin", this.options.rotationCenterX + "% " +...