JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="crop-container">
<div class="corner top-left-corner"></div>
<div class="corner top-right-corner"></div>
<div class="corner bottom-left-corner"></div>
<div class="corner bottom-right-corner"></div>
<div class="corner left-middle-corner"></div>
<div class="corner right-middle-corner"></div>
<ul class="cropper">
<li></li>
<li class="cell"></li>
<li></li>
<li></li>
<li class="cell plus"><span>+</span></li>
<li></li>
<li></li>
<li class="cell"></li>
<li></li>
</ul>  
</div>

CSS

.ui-resizable-handle { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";       /* IE 8 */
filter: alpha(opacity=0);  /* IE 5-7 */
-moz-opacity: 0.0;          /* Netscape */
-khtml-opacity: 0.0;        /* Safari 1.x */
opacity: 0.0;   
}
.crop-container{
    display: block;
    height: 200px;
    width: 200px;
    margin: 0px;
    padding-right: 4px;
	padding-bottom: 4px;
	padding-top: 2px;
	padding-left: 2px;
	
}

ul.cropper{
	flex-wrap: wrap;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
	width: 100%;
	height: 100%;
    border: 1px dashed #6A8CD7;
	margin: 0;
    padding: 0;
    list-style-type: none;
	    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	opacity: 0.7;
}
 .cropper li{
display: inline-block;
 	flex-basis: 25%;
	flex-grow: 1;
	flex-shrink: 1;
	height: 33%;
 	border-bottom: 1px dashed #ccc;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	opacity: 0.8;
}
.cell{
	border-left: 1px dashed #ccc;
	border-right: 1px dashed #ccc;
}

.cropper li.plus {
    display: flex;
    align-items: center;
    justify-content: center;
}

span{    
	color: #ccc;
	
	    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	opacity: 0.8;
}

.corner{
    position: absolute;
     height: 6px;
    width: 6px;
    background-color: #6A8CD7;
    z-index: 1;
			    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	opacity: 0.7;
}
.top-left-corner{
 float: left;

    top: 0;
    left: 0; 
}
.top-right-corner{
    float:right;
    top:0;
    right:0;
}
.bottom-left-corner{
  bottom: 0;
    left: 0; 
}
.bottom-right-corner{
    bottom: 0;
    right: 0;
}
.left-middle-corner{
 ...

JavaScript

$(document).ready(function() {
     $( ".crop-container" ).resizable({
     handles: "all",
     alsoResize: ".cropper",

    });
     
   $( ".crop-container" ).draggable({

   });
});