JSFiddle - React, Tailwind, and code Playground

by Alexander Savin

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css">
<img id="elementResizable" src="http://www.wired.com/images_blogs/business/2012/12/google.jpg">
<div class="ui-resizable-handle ui-resizable-nw resizer-anchor" id="nwgrip"></div>
<div class="ui-resizable-handle ui-resizable-ne resizer-anchor" id="negrip"></div>
<div class="ui-resizable-handle ui-resizable-sw resizer-anchor" id="swgrip"></div>
<div class="ui-resizable-handle ui-resizable-se resizer-anchor" id="segrip"></div>
<div class="ui-resizable-handle ui-resizable-n resizer-anchor" id="ngrip"></div>
<div class="ui-resizable-handle ui-resizable-s resizer-anchor" id="sgrip"></div>
<div class="ui-resizable-handle ui-resizable-e resizer-anchor" id="egrip"></div>
<div class="ui-resizable-handle ui-resizable-w resizer-anchor" id="wgrip"></div>

CSS

.resizer-anchor {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #eee;
    z-index: 50;
    border-radius: 50%;
    box-shadow: 0 1px 0 rgba(1, 1, 1, 0.8), 0 0 2px rgba(1, 1, 1, 0.8);
    cursor: pointer;
    opacity: 1;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transition: opacity 0.22s ease, margin 0.22s ease;
    -moz-transition: opacity 0.22s ease, margin 0.22s ease;
    -ms-transition: opacity 0.22s ease, margin 0.22s ease;
    transition: opacity 0.22s ease, margin 0.22s ease;
}
#elementResizable {
    border: 10px solid transparent;
    width: 300px;
    height: 200px;
    background: #eee;
    /* overflow: hidden;*/
}
#nwgrip {
    left: -10px;
    top: -10px;
}
#negrip {
    top: -10px;
    right: -10px;
}
#swgrip {
    bottom: -10px;
    left: -10px;
}
#segrip {
    bottom: -10px;
    right:-10px;
}
#ngrip {
    top: -10px;
    left:48%;
}
#sgrip {
    bottom: -10px;
    left: 48%;
}
#wgrip {
    left:-10px;
    top:50%;
}
#egrip {
    right:-10px;
    top:50%;
}

JavaScript

$('#elementResizable').resizable({
    handles: {
        'nw': '#nwgrip',
            'ne': '#negrip',
            'sw': '#swgrip',
            'se': '#segrip',
            'n': '#ngrip',
            'e': '#egrip',
            's': '#sgrip',
            'w': '#wgrip'
    }
});