JSFiddle - React, Tailwind, and code Playground

by nsjithin

HTML

<div class="wrap">
    <div class='object' data-width='100px' data-height='150px' style="top:10px;left:10px;width:100px;height:150px;background-color: red;"></div>
    <div class='object' data-width='200px' data-height='100px' style="top:110px;left:160px;width:200px;height:100px;background-color: green;"></div>
    <div class='object' data-width='150px' data-height='150px' style="top:260px;left:10px;width:150px;height:150px;background-color: blue;"></div>
</div>
<button id="trigger">Do Effect</button>
<button id="reset">Reset</button>

CSS

.wrap{
    width:500px;
    height:500px;
    border:solid 1px #ccc;
}
.object{
    position: absolute;
    border:solid 1px #ccc;
}

JavaScript

$('button#trigger').click(function(){
    
});