• HTML
• CSS

HTML

<div class="card">
    <i></i>
</div>

CSS

*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#f8f8f8;
}
.card
{
    position:relative;
    width:300px;
    height:400px;
    background:#fff;
    box-shadow:0 25px 50px rgba(0,0,0,0.15);
    border-radius:20px;
}
.card i
{
    position:absolute;
    top:40px;
    left:-15px;
    width:280px;
    height:50px;
    background:#af43f1;
    border-radius:30px;
    border-bottom-left-radius:0;
}
.card i::before
{
    content:'';
    position:absolute;
    top:50px;
    width:15px;
    height:30px;
    background:#8045c6;
    border-top-left-radius:20px;
    border-bottom-left-radius:20px;
    z-index:2;
}
.card i::after
{
    content:'';
    position:absolute;
    top:50px;
    width:15px;
    height:15px;
    background:#af43f1;
    z-index:1;
}

/*
    All the credits: https://www.youtube.com/watch?v=D9aHXGb_ABs
*/