JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"></div>

CSS

#test{
    width: 100px;
    height: 300px;
    background: green;
    position: relative;
    display: inline-block;
}

#test:before{
    background: white;
    height: 300px;
    width: 30px;
    border-radius: 0 60px 60px 0 / 0 300px 300px 0;
    display: inline-block;
    content: '';
}

#test:after{
    background: white;
    height: 300px;
    width: 30px;
    border-radius: 60px 0 0 60px / 300px 0 0  300px;
    display: inline-block;
    content: '';
    position: relative;
    left: 40px;
}