JSFiddle - React, Tailwind, and code Playground

by RAX7

HTML

<section class="s1"></section>
<section class="s2"></section>

CSS

body {
  margin: 0;
}

.s1, .s2 {
  height: 50vh;
}

.s1 {
  position: relative;
  background-color: #f4f8fb;
}

.s1::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  height: 30px;
  width: 100%;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="104" height="30"%3E%3Cpath fill="%23f4f8fb" d="M52,29c-12,0-23-5-30-14A45.7,45.7,0,0,0,10,4,35.2,35.2,0,0,0,0,0H104A35.2,35.2,0,0,0,94,4,45.7,45.7,0,0,0,82,15C75,24,64,29,52,29Z"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: contain;
}

.s2 {
  background-color: #232831;
}