JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <div class="parent">
      <div class='child'>
        <img src ='https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png' />
      </div>
      <div class='child'>
        <img src ='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Wand-128.png' />
      </div>
      <div class='child'>
        <img 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;
  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;
}

JavaScript

$( function() {
  var a = 1;
  $( ".child" ).draggable({
    containment: "parent",
    start: function(event, ui) { $(this).css("z-index", a++); }
  }).hover(function(){
    $(this).prepend('<button class="remove"></button>');
  }, function(){
    $(this).find('.remove').remove();
  }).on('click', '.remove', function(){
    $(this).closest('.child').remove();
  });
});