JSFiddle - React, Tailwind, and code Playground

by uttara

HTML

<div id="borderbox">
<div id="label1" class="drag" style="">
<div class="r1 handle" style=" cursor: nw-resize; left: -4px;  top: -4px;"></div>
<div class="r2 handle" style="cursor: n-resize; left: 50%; margin-left: -3px; top: -4px;"></div>
<div class="r3 handle" style="cursor: ne-resize; top: -4px; right: -4px;"></div>
<div class="r4 handle" style="cursor: e-resize; top: 50%; right: -4px; margin-top: -3px;"></div>
<div class="r5 handle" style="cursor: nw-resize; bottom: -4px; right: -4px;"></div>
<div class="r6 handle" style="cursor: n-resize; left: 50%; bottom: -4px; margin-left: -3px;"></div>
<div class="r7 handle" style="cursor: ne-resize; left: -4px; bottom: -4px;"></div>
<div class="r8 handle" style="cursor: e-resize; top: 50%; left: -4px; margin-top: -3px;"></div>
</div>
</div>

CSS

#borderbox{
   position: relative; 
    top: 42px; 
    left: 105px; 
    width: 60px; 
    height: 60px; 
    background-color:rgb(165, 165, 165);
    padding:10px;
    -webkit-box-sizing:border-box;
    moz-box-sizing:border-box;
}

#label1{
    width: 100%; 
    height: 100%; 
    background: none repeat scroll 0px 0px rgb(170, 175, 255);
}

.handle{
    background: none repeat scroll 0% 0% rgb(0, 0, 0);
    z-index: 10000; 
    height: 6px; 
    width: 6px; 
    position: absolute;
}