JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
</div>

CSS

#resizable {
    border: 1px solid;
    height: 150px;
    padding: 0.5em;
    width: 150px;
    margin-left: 50%;
  
}

#resizable h3 { text-align: center; margin: 0; }

.ui-resizable-handle{
    background: none repeat scroll 0 0 red;
    height: 10px;
    width: 10px;
    z-index: 90;
}

JavaScript

$( "#resizable" ).resizable();
//getter
//var handles = $( "#resizable" ).resizable( "option", "handles" );
//setter
//$( "#resizable" ).resizable( "option", "handles", 'n, e, s, w' );