JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 600 139" preserveAspectRatio="none">
<style type="text/css">
.st0{fill:url(#SVGID_1_);} 
.st1{fill:url(#SVGID_2_);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="3" y1="85.75" x2="603" y2="85.75"><stop offset="0" stop-color="#44ABCA"/><stop offset=".161" stop-color="#42A4C5"/><stop offset=".4" stop-color="#3D90B7"/><stop offset=".688" stop-color="#366FA1"/><stop offset="1" stop-color="#2B4383"/></linearGradient><path class="st0" d="M600 32.5v106.5h-600v-32.5c17.67 9.5 115 32.5 210.33 23.17 95.34-9.34 207-40 239-47.67l49.67-14.5 101-35z"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" y1="65.926" x2="600" y2="65.926"><stop offset="0" stop-color="#2B4383"/><stop offset=".307" stop-color="#356EA0"/><stop offset=".598" stop-color="#3D8FB7"/><stop offset=".839" stop-color="#42A4C5"/><stop offset="1" stop-color="#44ABCA"/></linearGradient><path class="st1" d="M0 106.5v-106.5h600v32.5l-101 35s-17.667 6.833-49.667 14.5-143.667 38.333-239 47.667-192.666-13.667-210.333-23.167z"/>
</svg>

CSS

svg {
  width: 100%;
  height: 200px;
}

JavaScript

/*

Ответ на вопрос: https://toster.ru/q/428986

*/