JSFiddle - React, Tailwind, and code Playground

by vrpruthvi

HTML

<div id="div1">
<div class="circleParentBtm">
    <div class="circleBtm"></div>
</div>
<div class="circleParentTop">
    <div class="circleTop"></div>
</div>
<div class="circleParentLeft">
    <div class="circleBtm circleLeft"></div>
</div>
<div class="circleParentRight">
    <div class="circleBtm circleRight"></div>
</div>
</div>

CSS

#div1{
    left:20px;
    position:relative;
    width:100px;
    height:100px;
    border: 1px solid black;
}
.circleParentBtm{
    position: absolute; bottom: 0px; width: 100%;
}
.circleParentLeft{
    position: absolute; height: 100%; left:0px;
}
.circleParentRight{
    position: absolute; right:0px; height: 100%;
}
.circleParentTop{
    position: absolute; top: 0px; width: 100%;
}
.circleBtm, .circleTop {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    width: 10px;
    height: 10px;
    background: #ccc;
    border: 1px solid #000;
    margin:0 auto -6px;
}
.circleTop{
    margin:-6px auto;
}
.circleLeft, .circleRight{
    position: relative;
    top: 50%;
    margin-left:-6px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.circleRight{
    margin-right:-6px;
}

JavaScript

// FOUR SIDE CIRLCE CONNECTORS
$(document).ready(function(){
    $('#div1').draggable()
              .resizable();
});