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">
<ul class="cropper">
<li></li>
<li></li>
<li></li>
<li class="row-two"></li>
<li class="row--two" ><span>+<span></li>
<li class="row--two"></li>
<li class="row--three"></li>
<li class="row--three"></li>
<li class="row--three"></li>
</ul>  
</div>
<div class="corner top-right-corner"></div>
<div class="corner top-left-corner"></div>
<div class="corner bottom-right-corner"></div>
<div class="corner bottom-left-corner"></div>

CSS

.crop-container{
    display: block;
    height: 200px;
    width: 200px;
    margin: 6px;
    padding: 4px;
}
span{
    display: inline-block;
     position: absolute;
    top: 44%;
}
ul.cropper{
      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;
}
 .cropper li{
display: inline-block;
	border-left: 1px dashed #ccc;
     border-bottom: 1px dashed #ccc;
    width: 31%;
	height: 33%;
     list-style: none;
    display: inline-block; 
    text-align: center; 
    vertical-align: middle;
    order: 1;
		margin: 0;
    padding: 0;	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	opacity: 0.7;
}
li .row-two{
	order: 2;
}
li .row-three{
	order: 3;
}
.corner{
    position: absolute;
     height: 6px;
    width: 6px;
    background-color: #6A8CD7;
    z-index: 1;
}
.top-left-corner{
 float: left;
}
.top-right-corner{
  float: right;
}
.bottom-right-corner{
   
}
.bottom-left-corner{
  
}

JavaScript

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

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

   });
});