JSFiddle - React, Tailwind, and code Playground

by supawaza

HTML

<svg id="main-image-svg" xxmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px" height="456.659px" viewBox="0 0 1000 456.659">
				<g>
					<defs>
						<path id="curve" d="M999.357,368.993c0,0-282.363,52.667-425.881,64c0,0-220.951,23.333-307.729,20c0,0-168.312,0.667-266.39-18.667V-3.341h1000V368.993z"/>
					</defs>
					
					<clipPath id="clipping">
						<path id="curve" d="M999.357,368.993c0,0-282.363,52.667-425.881,64c0,0-220.951,23.333-307.729,20c0,0-168.312,0.667-266.39-18.667V-3.341h1000V368.993z"/>
					</clipPath>
				
                    <image clip-path="url(#clipping)" -webkit-mask="url(#clipping)" width="1000" height="458"  xlink:href="http://fpoimg.com/1000x460"  transform="matrix(1.0013 0 0 1 -1.6441 -2.3407)">
						</image>
				</g>
			</svg>