JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bred">
    <div id="tupo">&nbsp;</div>
    <div id="tupo3">&nbsp;</div>
    <div id="tupo4">&nbsp;</div>
    <div id="tupo2">&nbsp;</div>
</div>

CSS

body{
    background:#e6e6e6;
}

#bred{
    width:100%;
    height:100px;
    background:#808080;
}

#tupo{
    width:100%;
    height:10px;
    background:#e6e6e6;
    border-radius:0 0 50% 50%;
}

#tupo2{
    width:100%;
    height:10px;
    background:#e6e6e6;
    border-radius:90% 10% 0 0; 
    position:absolute;
    margin-top:80px;
}

#tupo3{
    width:10px;
    height:100px;
    background:#e6e6e6;
    border-radius:0 70% 30% 0; 
    position:absolute;
    margin-left:0;
    margin-top:-10px;
}

#tupo4{
    width:10px;
    height:100px;
    background:#ede6d6;
    border-radius:70% 0 0 30%; 
    position:absolute;
    margin-left:100%;
    margin-right:40px;
    margin-top:-10px;
}