JSFiddle - React, Tailwind, and code Playground

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:...

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;
}