JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<div id="container">
</div>
<div id="resizeMe">
</div>

CSS

body
{
    background: #fff;
    margin: 0;
    padding: 0;
    height: 100%;
}
#resizeMe
{
    position: absolute;
    width: 200px;
    height: 300px;
    left: 240px;
    top: 70px;
    cursor: move;
    background-position: -190px -20px;
    background-repeat: no-repeat;
    border: solid 2px red;
}
#resizeSE, #resizeE, #resizeNE, #resizeN, #resizeNW, #resizeW, #resizeSW, #resizeS
{
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #333;
    border: 1px solid #fff;
    overflow: hidden;
}
#resizeSE
{
    bottom: -10px;
    right: -10px;
    cursor: se-resize;
}
#resizeE
{
    top: 50%;
    right: -10px;
    margin-top: -5px;
    cursor: e-resize;
}
#resizeNE
{
    top: -10px;
    right: -10px;
    cursor: ne-resize;
}
#resizeN
{
    top: -10px;
    left: 50%;
    margin-left: -5px;
    cursor: n-resize;
}
#resizeNW
{
    top: -10px;
    left: -10px;
    cursor: nw-resize;
}
#resizeW
{
    top: 50%;
    left: -10px;
    margin-top: -5px;
    cursor: w-resize;
}
#resizeSW
{
    left: -10px;
    bottom: -10px;
    cursor: sw-resize;
}
#resizeS
{
    bottom: -10px;
    left: 50%;
    margin-left: -5px;
    cursor: s-resize;
}
#container
{
    position: absolute;
    top: 50px;
    left: 50px;
    width: 650px;
    height: 450px;
    background-color: #ccc;
    background-image: url(http://placekitten.com/650/450);
}

JavaScript

$('#resizeMe').resizable(
    {
        handles:  'n,e,s,w,ne,se,nw,sw',
        resize : function(event, ui) 
        {
            this.style.backgroundPosition = '-' + (ui.position.left - 50) + 'px -' + (ui.position.top - 50) + 'px';
        }
    }
);