JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">
    <div class="container">
        
    </div>
</header>

<img class="svg-clipped" src="https://wallpapershome.ru/images/pages/pic_h/5286.jpg">
<svg height="0" width="0">
    <defs>
        <clipPath id="svgPath">
            <path d="m 1920,1080 c -56.2412,-86.45159 -145.4962,-150.8323 -245.2775,-176.92147 -82.9129,-21.6787 -172.0681,-17.20068 -253.3194,10.05236 -57.1895,19.18229 -110.1984,49.15367 -166.8214,69.9488 -28.3114,10.39756 -57.6291,18.50381 -87.6401,21.50161 -30.011,2.9978 -60.8015,0.7682 -89.329,-9.02109 -54.3918,-18.66469 -96.34151,-62.83726 -148.7749,-86.45026 -43.59961,-19.63477 -92.85498,-24.16589 -140.47482,-19.82991 -47.61984,4.33597 -94.02892,17.16865 -139.78085,31.06867 -45.75193,13.90001 -91.29549,28.96092 -138.2581,37.95883 -46.96262,8.99791 -95.80832,11.78555 -142.4077,1.06419 -32.57113,-7.49381 -63.24913,-21.36849 -94.30806,-33.71265 -31.05893,-12.34416 -63.2881,-23.33831 -96.6867,-24.59102 C 129.80372,899.30077 82.272912,918.10787 49.121097,951.63641 15.969282,985.16495 -2.299564,1032.9052 0,1080 V 0 h 1920 z"/>
        </clipPath>
    </defs>
</svg>

CSS

.svg-clipped {
    -webkit-clip-path: url(#svgPath);
    clip-path: url(#svgPath);
}

.container {
    max-width: 960px;
    margin: 0 auto;
}

.header {
    background: url() no-repeat center top /cover;
    padding-top: 200px;
    padding-bottom: 300px;
}