JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="top" id="svg" width="950" height="910" style="border: 2px rgb(204, 204, 204); margin-top: 10px;">
  <rect x="348" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="0"></rect>
  <rect x="500" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="1" style=""></rect>
</svg>

<svg class="bottom" id="svg" width="950" height="910" style="border: 2px rgb(204, 204, 204); margin-top: 10px;">
    <polygon points="348,206 598,206 598,106 348,106" id="polygon" polygonNo="1" fill="#8DB0F5"></polygon>
</svg>

CSS

.top{
position: absolute;
top: 34px;
left: 30px;
}