JSFiddle - React, Tailwind, and code Playground

by kamlesh0606

HTML

<div>
        <div id="ocontainer">
            <div style="padding-right: 23px;/* margin-right: 200px; margin-top: 20px;padding-right: 20px; */" class="drop ui-droppable out" id="container">
                <div style="position: relative; top: 288px; left: 134px; width: 116px; height: 158px;" id="label10" class="drag ui-droppable"></div>
<!--                 <div id="highlight" style=" "></div> -->
            <div class="drag" id="label1" style="position: relative; top: 143px; left: 157px; width: 60px; height: 60px;"></div><div style="top: 156px; left: 158px; width: 56px; height: 56px;" id="hover" class="ui-draggable" aria-disabled="false"><div style="background: none repeat scroll 0% 0% rgb(0, 0, 0); cursor: nw-resize; z-index: 10000; left: -4px; height: 6px; width: 6px; position: absolute; top: -4px;" class="r1 handle"></div><div style="background: none repeat scroll 0% 0% rgb(0, 0, 0); cursor: n-resize; z-index: 10000; left: 50%; height: 6px; width: 6px; position: absolute; margin-left: -4px; top: -4px;" class="r2 handle"></div><div class="r3 handle" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); cursor: ne-resize; z-index: 10000; width: 6px; position: absolute; top: -4px; height: 6px; right: -4px;"></div><div style="background: none repeat scroll 0% 0% rgb(0, 0, 0); cursor: e-resize; z-index: 10000; top: 50%; height: 6px; width: 6px; right: -4px; position: absolute; margin-top: -4px;" class="r4 handle"></div><div class="r5 handle" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); cursor: nw-resize; z-index: 10000; width: 6px; position: absolute; bottom: -4px; height: 6px; right: -4px;"></div><div style="background: none repeat scroll 0% 0% rgb(0, 0, 0); cursor: n-resize; z-index: 10000; left: 50%; height: 6px; width: 6px; bottom: -4px; position: absolute; margin-left: -4px;" class="r6 handle"></div><div class="r7 handle" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); cursor: ne-resize; z-index: 10000; width: 6px; position:...

CSS

#ocontainer
{

 width:320px !important; 
 height:300px;  
 background-color:#a5a5a5; 
/*  height: 300px;  */
 width: 300px; 
 overflow: hidden; 
 border: 1px solid;

}
.out {
    background-color: #A6BCCE;
}
.drop {
    background-color: #A5A5A5;
    border: 1px dashed #888888;
    height: 100%;
    overflow: auto;
    width: 300px;
}
.drag {
    background: none repeat scroll 0 0 #BBCCEE;
    border: 1px solid #8899BB;
    cursor: move;
}
#hover {
    border: 2px dashed red;
    display: block;
    position: absolute;
}