JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="container">
        <div class="ui-widget-content statsTile">
             <h4 class="ui-widget-header">Call Abbondaned</h4>

        </div>
        <div class="ui-widget-content statsTile">
             <h4 class="ui-widget-header">Abbondaned %</h4>

        </div>
        <div class="ui-widget-content statsTile">
             <h4 class="ui-widget-header">Average Ring Time</h4>

        </div>
        <div class="ui-widget-content statsTile">
             <h4 class="ui-widget-header">Call Answered</h4>

        </div>
    </div>
</div>

CSS

body {
    margin:0px
}
.statsTile {
    min-width: 180px;
    width: 180px;
    min-height: 180px;
    height: 180px;
    background: white;
    position: fixed !important;
}
.statsTile h4 {
    text-align: center;
    margin: 0;
}
#container {
    width: 400px;
    height: 300px;
    background: #666666;
}
#container > div:nth-child(1) {
    left: 0px;
    top: 0px;
}
#container > div:nth-child(2) {
    left: 30px;
    top: 30px;
}
#container > div:nth-child(3) {
    left: 60px;
    top: 60px;
}
#container > div:nth-child(4) {
    left: 90px;
    top: 90px;
}

JavaScript

$(function () {
    $("#wrapper #container .ui-widget-content.statsTile").draggable({
        cursor: 'move',
        containment: 'parent',
        stack: "div",
        distance: 10,
        scroll: false
    });

    $("#wrapper #container .ui-widget-content.statsTile").resizable({
        containment: 'parent',
        zIndex: false
    });
});