JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div id="resizable" class="border-box"><div id="content" class="border-box">Test case</div></div>

CSS

#resizable {
    width: 150px;
    height: 150px;
    padding: 35px 5px 5px 5px;
    background: rgb(31,31,31);
    border: 1px solid #222;
    color: #aaa;
}
#content {
    width: 100%;
    height: 100%;
    background: rgb(30,50,70);
    padding: 5px;
}

.border-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ui-resizable { position: absolute;}
.ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: 0px; left: 0; }
.ui-resizable-s { background: rgb(42,42,42); cursor: s-resize; height: 7px; width: 100%; bottom: 0px; left: 0; }
.ui-resizable-e { background: rgb(42,42,42); cursor: e-resize; width: 7px; right: 0px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: 0px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { background: rgb(51,51,51); cursor: sw-resize; width: 9px; height: 9px; left: 0px; bottom: 0px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: 0px; top: 0px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: 0px; top: 0px;}

JavaScript

$("#resizable").resizable();