JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="container">
  <div id="blue" class="draggable">
    <div class="bar"></div>
    <img>
  </div>
  <div id="orange" class="draggable">
    <div class="bar"></div>
    <img>
  </div>
</div>

CSS

#container {
  transform-style: preserve-3d;
  transform: translateY(20px);
}

.draggable {
  width: 90px;
  height: 90px;
}

img {
  width: 90px;
  height: 90px;
  transform: translate3d(0, 0, 50px)
}

.bar {
  position: absolute;
  top: -10px;
  width: 90px;
  height: 10px;
  z-index:-1;
  background-color: yellow;
  transform: translate3d(0, 0, 25px)
}

#blue img {
  background-color: blue;
}

#orange img {
  background-color: orange;
}

JavaScript

$(document).ready(function() {
  $('.draggable').draggable({
    zIndex:1
  })
});