JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rect">
    <div class="circle"></div>
</div>

<div class="rect">
    <div class="circle"></div>
    <div class="rect inner">
        <div class="circle"></div>
    </div>
</div>

CSS

div {
    background-color:#000;
}
.rect {
    width: 100px;
    height: 30px;
    position: relative;
    margin: 50px; 
}
.circle {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    position: absolute;
    top: -15px;
    left: 20px;
}
.rect.inner {
    width: 94px;
    height: 24px;
    background-color: #fff;
    position: absolute;
    left: 3px;
    top: 3px;
    margin: 0;
}
.inner .circle {
    width: 54px;
    height: 54px;
    background-color: #fff;
}