JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
        Content
      </div>

CSS

.box {
    width: 50%;
    min-height: 100px;
    box-shadow:  0 0 0.125rem 0 hsla(0, 0%, 0%, 0.4);
    position: relative;
    border-radius: 10px;
    z-index: 0;
    padding: 12px;
    margin-bottom: 4px;
}


.box::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 10px;
    border-radius: 50%;
    box-shadow:  0 0 0.125rem 0 hsla(0, 0%, 0%, 0.4); /* Your desired box shadow */
    transform: translateX(-50%);
    background-color: white;
    border-bottom-left-radius: 110px;
    border-bottom-right-radius: 110px;
    border-top: 0;
    clip-path: inset(0px -10px -10px -10px);
}

.box::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 10px;
    box-shadow:  0 0 0.125rem 0 hsla(0, 0%, 0%, 0.4); /* Your desired box shadow */
    transform: translateX(-50%);
    background-color: white;
    border-top-left-radius: 110px;
    border-top-right-radius: 110px;
    border-bottom: 0;
    clip-path: inset(0px -10px -10px -10px);
}

.box::before {
    top: -1.1px;
    left: 50%;
}

.box::after {
    bottom: -1px;
    left: 50%;
}