JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="crop_area">
        <div id="crop_left_border"></div>
        <div id="crop_right_border"></div>
        <div id="crop_top_border"></div>
        <div id="crop_bottom_border"></div>
    </div>
</div>

CSS

body{margin:100px;}
#container{width:400px; height:400px; position:relative; border:1px solid black;}
#crop_area{width:300px; height:250px;  position:absolute; z-index:1; left:80px; top:100px; }

#crop_left_border{ 
    height:100%; position:absolute; width:1px; 
    background:url('http://www.travelgirls.com/media/css/Jcrop.gif') repeat-y; left:0px;
}
#crop_right_border{ height:100%; position:absolute; width:1px; 
    background:url('http://www.travelgirls.com/media/css/Jcrop.gif') repeat-y;
    right:0px;}
#crop_top_border{ 
    height:1px; position:absolute; width:100%; 
    background:url('http://www.travelgirls.com/media/css/Jcrop.gif') repeat-x;
    top:0px;
}
#crop_bottom_border{ 
    height:1px; position:absolute; width:100%; 
    background:url('http://www.travelgirls.com/media/css/Jcrop.gif') repeat-x;
    bottom:0px;
}

JavaScript

$(document).ready(function(){
    $( "#crop_area" ).resizable({
        aspectRatio: 9 / 10,
        containment: "#container",
        handles: 'n, e, s, w'
    });
    $( "#crop_area" ).draggable({containment: 'parent'});
});