JSFiddle - React, Tailwind, and code Playground

HTML

<div class="proSchemeBox">
        <div class="proSchemePart" data-spec="top"></div>
    </div>

CSS

.proSchemeBox {
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        width: 884px;
        height: 290px;
        margin-bottom: 85px;
    }

    .proSchemePart {
        display: flex;
        position: relative;
        border-radius: 25px;
        background: linear-gradient(to bottom, #005AB3 0%, #0561BC 25%, #0B6AC6 50%, #1174D1 75%, #157BD8 100%);
        box-shadow: inset 0 -3px 8px 0 rgba(0,0,0,0.4);
        border: 1px solid black;
    }

   .proSchemePart:before {
        content: "";
        display: block;
        position: absolute;
        top: -21px;
        left: 1%;
        height: 10px;
        width: 98%;
        border-radius: 16px;
        box-shadow: 0 14px 13px rgba(255,255,255,.7);
    }

    .proSchemePart[data-spec='top'] {
        width: 350px;
        height: 90px;

    }