JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<section>
    Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis.
</section>

<!-- <svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="1200px" height="400px" viewBox="0 0 1200 400" xml:space="preserve">
<path fill="#020202" d="M-1,0v400c0,0,298.25-82,599.25-82S1199,400,1199,400V0c0,0-301.283,81.739-600.891,81.739S-1,0-1,0z"/>
</svg> -->

<svg width="0" height="0">
  <defs>
<clipPath id="clipMask">
     <path d="M-1,0v400c0,0,298.25-82,599.25-82S1199,400,1199,400V0c0,0-301.283,81.739-600.891,81.739S-1,0-1,0z"/>
    </clipPath>
<!--     
       <clipPath id="clipMask" clipPathUnits="objectBoundingBox">
<path d="M-1,0v400c0,0,298.25-82,599.25-82S1199,400,1199,400V0c0,0-301.283,81.739-600.891,81.739S-1,0-1,0z"/>
      </clipPath>
           -->    
  </defs> 
</svg>

SCSS

* {
    box-sizing: border-box;
}
section {
    font-size: 28px;
    padding: 60px 30px;
    width: 100%;
    height: 400px;
    background: #c0ffee;
    clip-path: url(#clipMask);
}