JSFiddle - React, Tailwind, and code Playground

by destramic

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-middle-corner"></div>
<div class="corner top-right-corner"></div>
<div class="corner bottom-left-corner"></div>
<div class="corner bottom-middle-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="rotating-dashed cropper">
<li class="cell-bottom"></li>
<li class="cell-bottom cell-sides"></li>
<li class="cell-bottom"></li>
<li class="cell-bottom"></li>
<li class="cell-bottom cell-sides plus"><span>+</span></li>
<li class="cell-bottom"></li>
<li></li>
<li class="cell-sides"></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{
    cursor: move;
    position: absolute;
    z-index: 2;	
    height: 200px;
    width: 200px;
    margin: 0px;
    padding-left:0;
    padding-top: 1px;
    padding-right: 2px;
    padding-bottom: 1px;
	display: block;
}

ul.cropper{
    padding: 0;
    margin: 0;
	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;
    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: block;
 	flex-basis: 25%;
	flex-grow: 1;
	flex-shrink: 1;
	height: 33%;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	opacity: 0.7;
}
.cropper li.cell-sides{
	border-left: 1px dashed #ccc;
	border-right: 1px dashed #ccc;
}
.cropper .cell-bottom {
    border-bottom: 1px dashed #ccc;
}
.cropper li.plus {
    display: flex;
    align-items: center;
    justify-content: center;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	opacity: 0.7;
}

span{    
	color: #ccc;
    font-size: 30px;
}

.corner{
    position: absolute;
     height: 8px;
    width: 8px;
    background-color: #6A8CD7;	-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: -3px;
    left: -4px; 
}
.top-right-corner{
    float:right;
    top:-3px;
    right:-3px;
}
.bottom-left-corner{
  bottom:...

JavaScript

$(document).ready(function() {
     $( ".crop-container" ).resizable({
     handles: 'all',
    });
     
   $( ".crop-container" ).draggable();
});