JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<div class="main">
  <div class="wrapper">
    <div class="top-wave"></div>
    <div class="box-top"></div>
		 <div class="bottom-wave"></div>
  
   
  </div>


</div>

CSS

.main {
  display: flex;
}

.wrapper {
  display: flex-grow;
  padding: 10px;
}

.top-wave {
  position: relative;
  height: 70px;
  width: 600px;
  background: white;
}
.top-wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 340px;
  height: 80px;
  background-color: red;
  right: 0;
  top: 40px;
}
.top-wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 300px;
  height: 70px;
  background-color: white;
  left: 0;
  top: 27px;
}

.box-top {
  width: 100%;
  height: 100%;
  background:url(https://i.ibb.co/0XgR7D1/h.jpg)  no-repeat center center;
	background-size:cover;
  margin-bottom: 20px;
}

.box-bottom {
  width: 600px;
  height: 300px;
  background: red;
}


.divider {
  width: 600px;
  height: 20px;
}

.bottom-wave {
  position: relative;
  height: 70px;
  width: 600px;
  background: red;
}
.bottom-wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 340px;
  height: 80px;
  background-color: white;
  right: -5px;
  top: 38px;
}
.bottom-wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 300px;
  height: 70px;
  background-color: red;
  left: 0;
  top: 27px;
}