JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent"></div>
<div class="child child-1"></div>
<div class="child child-2"></div>

CSS

.parent {
  width: 100px;
  height: 100px;
  border: 5px solid black;
  border-radius: 50%;
  position: absolute;
  top: 100px;
  left: 100px;
  background-color: white;
}

.child {
  width: 50px;
  height: 50px;
  border: 5px solid black;
  border-radius: 50%;
  position: absolute;
}

.child-1 {
  top: 50px;
  left: 250px;
}

.child-1::before {
  content: '';
  display: block;
  border-top: 5px solid black;
  width: 65px;
  height: 100px;
  position: absolute;
  left: -36px;
  transform: rotate(-30deg);
  top: 46px;
}

.child-2 {
  top: 200px;
  left: 250px;
}

.child-2::before {
    content: '';
    display: block;
    border-top: 5px solid black;
    width: 65px;
    height: 100px;
    position: absolute;
    left: -86px;
    transform: rotate(30deg);
    top: -14px;
}