JSFiddle - React, Tailwind, and code Playground

by reveriedesigns

HTML

<div id="background">

<svg id="wave"  viewBox="0 0 1440 320">

 
  <path stroke="#48609D" fill="#454E88" fill-opacity="0.7" d="M0,160L60,133.3C120,107,240,53,360,58.7C480,64,600,128,720,176C840,224,960,256,1080,224C1200,192,1320,96,1380,48L1440,0L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>

<path stroke="#48609D" fill="#454E88" fill-opacity="0.7" d="M0,224L60,224C120,224,240,224,360,186.7C480,149,600,75,720,53.3C840,32,960,64,1080,96C1200,128,1320,160,1380,176L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
<path stroke="#48609D" fill="#454E88" fill-opacity="0.7" d="M0,96L40,106.7C80,117,160,139,240,170.7C320,203,400,245,480,256C560,267,640,245,720,218.7C800,192,880,160,960,165.3C1040,171,1120,213,1200,234.7C1280,256,1360,256,1400,256L1440,256L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>

 
</svg>

<svg class="circle" id="centercircle">
   <circle stroke="#48609D" fill="#D2D4E4" fill-opacity="0.4" cx="5" cy="5" r="5"/>

</svg>

<svg class="circle" id="leftcircle" >
    <circle stroke="#48609D" fill="#D2D4E4" fill-opacity="0.4" cx="5" cy="5" r="5"/>
</svg>
<svg class="circle" id="rightcircle">
    <circle stroke="#48609D" fill="#D2D4E4" fill-opacity="0.4" cx="5" cy="5" r="5"/>
</svg>

</div>

CSS

body{
margin: 0;
padding: 0;
}
#background {
  height: 1000px;
  background: rgb(76, 72, 143);
  background: -webkit-linear-gradient(left, rgba(76, 72, 143, 1) 0%, rgba(56, 53, 108, 1) 35%, rgba(36, 35, 72, 1) 100%);
  background: -moz-linear-gradient(left, rgba(76, 72, 143, 1) 0%, rgba(56, 53, 108, 1) 35%, rgba(36, 35, 72, 1) 100%);
  background: -o-linear-gradient(left, rgba(76, 72, 143, 1) 0%, rgba(56, 53, 108, 1) 35%, rgba(36, 35, 72, 1) 100%);
  background: linear-gradient(to right, rgba(76, 72, 143, 1) 0%, rgba(56, 53, 108, 1) 35%, rgba(36, 35, 72, 1) 100%);
}

#wave {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
}

.circle {
  position: absolute;
} 

#leftcircle{
  top: 80%;
  left: 20%;
}

#centercircle{
  top: 60%;
  left: 55%;
}

#rightcircle{
  top: 82%;
  left: 70%;
}