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{
  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+"% "+this.options.rotationCenterY+
"%");this.element.css("-ms-transform-origin",this.options.rotationCenterX+"% "+this.options.rotationCenterY+"%");this.element.css("-webkit-transform-origin",this.options.rotationCenterX+"%...