JSFiddle - React, Tailwind, and code Playground

by otinanaipali

HTML

<div id="fixed"></div>

CSS

#fixed {
	padding: 100px 0 100px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1680' height='240'><filter id='shadow'><feDropShadow stdDeviation='15' flood-opacity='0.25' /></filter><path fill='%23A8E2C1' style='filter:url(%23shadow);' d='M1680,0H0v127.8c106.9,25.7,229.5,44.4,344.8,49.6c116,5.2,215.4-3,302.6-14.6c114.4-15.1,213.8-36,332.2-49.5 c118.5-13.5,262.4-19.3,419.3-3.9c98.5,9.7,197.8,27.8,281.1,50.7V0z' /><path fill='%23FFFFFF' d='M0,101.8c73.2,16.7,148.1,29.8,221.1,37.9c145.7,16.1,272.2,11.7,383.7,1.7c146.3-13.1,274.3-35.5,425.5-46.1 c151.2-10.5,333.5-8.2,529.7,25.6c40.3,6.9,80.5,15.1,120,24.4V0H0V101.8z' /></svg>");
	background-position: center top;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}