JSFiddle - React, Tailwind, and code Playground

by Petra1999

HTML

<div class='wave'></div>

CSS

.wave{
  background:rgba(113,219,244,0.5);
  height: 100px;
  position: relative;  
}
.wave::before, .wave::after{
  border-bottom: 5px solid white;
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background-size: 20px 40px;
  background-image:
    radial-gradient(circle at 10px -15px, transparent 20px, white 21px);
}
.wave::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15px;
  background-size: 40px 40px;
  background-image:
    radial-gradient(circle at 10px 26px, white 20px, transparent 21px);
}