JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<div>
    <div id="box1" class="front-on-click"></div>
    <div id="box2" class="front-on-click"></div>
    <div id="box3" class="front-on-click"></div>
    <div id="box4" class="front-on-click"></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}

.front{
    z-index:100;
}
.front-on-click{
    position:absolute;
    background:white;
    border:1px solid black;
    cursor:pointer;
}

JavaScript

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

$('.front-on-click').click(function(){
    $('.front').css('z-index','0').removeClass('front');
    $(this).addClass('front').css('z-index','100');
});

});