JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <div class="square">
    <div class="block-line left">
      <div class="circle top left"></div>
      <div class="circle bottom left"></div>
      <div class="circle middle top"></div>
      <div class="circle middle left"></div>
    </div>
    <div class="block-line right">
      <div class="circle top right"></div>
      <div class="circle bottom right"></div>
      <div class="circle middle bottom"></div>
      <div class="circle middle right"></div>
    </div>
  </div>
</div>

CSS

.block{
  padding:200px 250px;
}
.square{
  position:relative;
  border-radius:5px;
  background:#bbb;
  width:100%;
  padding-top:100%;
}
.block-line{
  position:absolute;
  border:2px solid #bbb;
  width:50%;
  padding-top:150%;
  top:-25%;
  z-index:-1;
}
.block-line.left{
  left:-25%;
  border-left:0;
}
.block-line.right{
  right:-25%;
  border-right:0;
}
.circle{
  position:absolute;
  width:150%;
  padding-top:150%;
  border-radius:100%;
  background:#bbb;
}
.circle.top{
  top:-25%;
}
.circle.bottom{
  bottom:-25%;
}
.circle.left{
  left:-110%;
}
.circle.right{
  right:-110%;
}
.circle.middle{
  top:25%;
  left:auto;
  right:auto;
  bottom:auto;
}
.circle.middle.top{
  left:75%;
  top:-50%;
}
.circle.middle.top:after{
  content:'';
  position:absolute;
  display:block;
  width:0;
  border:1px solid #bbb;
  height:50%;
  top:100%;
  left:calc(50% - 1px);
}
.circle.middle.bottom{
  top:auto;
  right:75%;
  bottom:-50%;
}
.circle.middle.bottom:after{
  content:'';
  position:absolute;
  display:block;
  width:0;
  border:1px solid #bbb;
  height:50%;
  bottom:90%;
  right:calc(50% - 1px);
}
.circle.middle.left{
  left:-200%;
}
.circle.middle.left:after{
  content:'';
  position:absolute;
  display:block;
  height:0;
  border:1px solid #bbb;
  width:100%;
  left:90%;
  top:calc(50% - 1px);
}
.circle.middle.right{
  right:-200%;
}
.circle.middle.right:after{
  content:'';
  position:absolute;
  display:block;
  height:0;
  border:1px solid #bbb;
  width:100%;
  right:90%;
  top:calc(50% - 1px);
}