JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 100 C 20 0 50 0 100 100 Z"></path></svg>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas voluptates tenetur, amet officia aliquam. Officiis sit soluta mollitia provident modi unde similique doloremque corporis, eligendi, quod atque, suscipit accusantium hic molestiae iste non eius ipsam placeat deleniti reiciendis molestias. Assumenda delectus facilis porro voluptas ipsam aperiam unde consequatur corporis, neque quidem accusamus ex vero ratione suscipit quaerat aspernatur quo optio voluptatibus blanditiis aut dolore! Ipsam, dolor. Sequi iste aperiam vel consequuntur ratione atque at ducimus nobis eius! Dignissimos iste facere, officia quibusdam magni omnis debitis tempore dolor, sequi quasi veniam sit nisi tempora hic molestiae earum recusandae at consequatur sed!</div>
<svg width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 0 L50 100 L100 0 Z"></path><path d="M50 100 L100 40 L100 0 Z"></path></svg>

CSS

div {
  color:white;
  margin:-4px 0 0 0;
  padding:24px;
  background: #3498db;}
 svg {fill: #3498db;stroke:#3498db;}