JSFiddle - React, Tailwind, and code Playground

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;">
  <iframe src="http://www.example.com/" style="width:100%; height:100%;"></iframe>
</div>

JavaScript

$(function() {
  $(".resizable").resizable({
    start: function(event, ui) {
      ui.element.append($("<div/>", {
        id: "iframe-barrier",
        css: {
          position: "absolute",
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
          "z-index": 10
        }
      }));
    },
    stop: function(event, ui) {
      $("#iframe-barrier", ui.element).remove();
    },
    resize: function(event, ui) {
      $("iframe", ui.element).width(ui.size.width).height(ui.size.height);
    }
  });
});