JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="inv_charactergameContainer">
  <div class="inv_charactergameMainContainer">
    <img src="https://s10.postimg.org/q7pcmt0dl/image.png" class="inv_charactergameBackground">
    <div class="inv_charactergameInnerContainer">
      <div class="inv_charactergameWrapper">

        <div class="inv_categoryMainContainer">
          <div class="inv_dropContainer">
            <div class="inv_dropBox"></div>
          </div>
          <div class="inv_draggableCategoryContainer">
            <div class="inv_draggableCategoryOption" id="inv_draggableCategoryOption_1"></div>
            <div class="inv_draggableCategoryOption" id="inv_draggableCategoryOption_2"></div>
            <div class="inv_draggableCategoryOption" id="inv_draggableCategoryOption_3"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

.inv_charactergameMainContainer {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  background: #fafafa;
  display: block;
}

.inv_charactergameBackground {
  max-width: 100%;
  z-index: 1;
}

.inv_charactergameInnerContainer {
  position: absolute;
  float: left;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.inv_charactergameWrapper {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}

.inv_charactergameContainer .inv_categoryMainContainer {
  display: block;
  position: absolute;
  left: 51%;
  /*top:4%;*/
  width: 37%;
  height: 100%;
  /*margin-left:1%;*/
}

.inv_charactergameContainer .inv_dropContainer {
  position: relative;
  float: left;
  width: 48%;
  margin-right: 5%;
  height: 100%;
}

.inv_charactergameContainer .inv_dropBox {
  position: relative;
  float: left;
  width: 100%;
  height: 30%;
  top: 26%;
  background-image: url('https://s10.postimg.org/k4qmc4rrd/drop.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.inv_charactergameContainer .inv_draggableCategoryContainer {
  position: relative;
  float: left;
  width: 47%;
  height: 100%;
}

.inv_charactergameContainer .inv_draggableCategoryOption {
  cursor: pointer;
}

.inv_charactergameContainer #inv_draggableCategoryOption_1 {
  position: absolute;
  float: left;
  width: 61%;
  height: 19%;
  top: 5%;
  background-image: url('https://s3.postimg.org/j7w1ry9wj/drag.png');
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transform: rotate(-13deg);
  -moz-transform: rotate(-13deg);
  -o-transform: rotate(-13deg);
  -ms-transform: rotate(-13deg);
  transform: rotate(-13deg);
}

.inv_charactergameContainer #inv_draggableCategoryOption_2 {
  position: absolute;
  float: left;
  width: 61%;
  height: 19%;
  top: 28.6%;
  left: 31%;
  background-image: url('https://s3.postimg.org/j7w1ry9wj/drag.png');
  background-repeat: no-repeat;
  background-size:...

JavaScript

jQuery('.inv_draggableCategoryOption').draggable({
  containment: '.inv_charactergameWrapper',
  cursor: 'move',
  revertDuration: 450,
  revert: function(droppedOn) {
    console.log(this, droppedOn)
    if (droppedOn) {
      this.css({
        transform: "rotate(0)",
        height: droppedOn.height(),
        width: droppedOn.width()
      }).offset(droppedOn.offset())
      return false
    } else {
    	let that=this
      setTimeout(function() {
        that.removeAttr("style")
      }, 500)
      return true
    }
  }
});
$(".inv_dropBox").droppable()