JSFiddle - React, Tailwind, and code Playground

HTML

<div class="custom-shape-divider">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill"></path>
    </svg>
</div>

CSS

.custom-shape-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 99;
}

.custom-shape-divider svg {
    position: relative;
    display: block;
    width: calc(300% + 1.3px);
    height: 500px;
}

.custom-shape-divider .shape-fill {
    fill: red;
}