JSFiddle - React, Tailwind, and code Playground

HTML

<div class="crazy-block"></div>

CSS

.crazy-block {
    width: 25%;
    height: 200px;
    margin: 20px;
    border-radius: 8px 0 0 8px;
    background: #fefcea;
    background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%);
    background: linear-gradient(to bottom, #fefcea 0%,#f1da36 100%);
    position: relative;
}

.crazy-block::before, .crazy-block::after {
    content: '';
    position: absolute;
    height: 8px;
    left: 5px;
    right: 0;  
}

.crazy-block::before {
    background: #fefcea;
    border-radius: 100% 0 0 0/100% 0 0 0;
    top: -7px;
}

.crazy-block::after {
    background: #f1da36;
    border-radius: 0 0 0 100%/0 0 0 100%;
    bottom: -7px;
}