JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dragZone">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
</div>

CSS

#box1 {width: 150px; height: 150px; background-color: red; position: absolute; top: 0px; left: 0px; z-index: 0}
#box2 {width: 150px; height: 150px; background-color: green; position: absolute; top: 20px; left: 50px; z-index: 0}
#box3 {width: 150px; height: 150px; background-color: yellow; position: absolute; top: 50px; left: 100px; z-index: 0}
#box4 {width: 150px; height: 150px; background-color: blue; position: absolute; top: 70px; left: 200px; z-index: 0}
.top {z-index: 100!important; position: relative}
.bottom {z-index: 10!important; position: relative}

JavaScript

$(document).ready(function() {
    
    $('#box1,#box2,#box3,#box4').draggable({
        stack: "div",
        distance: 0
    });
    
    
});