JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">
<div class="resizable" style="width: 200px; height: 200px; padding: 5px;">
  <div class="ui-resizable-handle ui-resizable-n"></div>
  <div class="ui-resizable-handle ui-resizable-s"></div>
  <div class="ui-resizable-handle ui-resizable-e"></div>
  <div class="ui-resizable-handle ui-resizable-w"></div>
  <iframe src="https://www.sleekinteractive.com/" style="width:100%; height:100%; border: none;"></iframe>
</div>

JavaScript

$(function() {
  $(".resizable").resizable({
  	handles: {
    	'n': '.ui-resizable-n',
      's': '.ui-resizable-s',
      'e': '.ui-resizable-e',
      'w': '.ui-resizable-w'
    },
  	start: function(event, ui) {
     
    },
    stop: function(event, ui) {
     // $("#iframe-barrier", ui.element).remove();
    },
    resize: function(event, ui) {
     // $("iframe", ui.element).width(ui.size.width).height(ui.size.height);
    }
  }).draggable();
});