JSFiddle - React, Tailwind, and code Playground

by Jennyjangles

HTML

<div class="clipMe" id="clipped1"> </div>
<svg height="0" width="0" style="float:left;">
            <defs>
                <clipPath id="clip" clipPathUnits="XobjectBoundingBox">
                    <path fill="black" stroke="black" stroke-miterlimit="10" stroke-linecap="round" d="m199.50246,57.06783c-40.89451,34.98637 -83.9983,65.99866 -96.99804,79.99838c-12.99974,13.99972 -30.99937,29.99939 1.99996,29.99939c32.99933,0 343.99305,-129.99737 366.99258,-141.99713c22.99954,-11.99975 -10.01276,39.86121 -58.5053,77.92944c-48.49253,38.06822 -94.4916,72.06753 -128.49091,97.06702c-33.99931,24.99948 -176.99644,99.998 -135.99726,106.99785c40.99918,6.99985 101.99793,5.99986 221.99551,-6.99987c119.99758,-12.99973 181.99633,-52.99892 209.99576,-62.99872c27.99943,-9.9998 13.99971,16.99966 -7.99984,34.99929c-21.99956,17.99964 -249.99494,160.99675 -320.99351,188.99618c-70.99857,27.99943 -129.99737,51.99894 -146.99703,69.99858c-16.99966,17.99964 -31.99934,80.99836 -29.50588,91.92914" />
                </clipPath>
            </defs>
        </svg>

<header id="header1">Header 1</header>
<div class="clipMe" id="clipped2"> </div>

<header id="header2">Header 2</header>
<div class="clipMe" id="clipped3"> </div>

CSS

header {
    height: 100px;
    padding: 10px;
    margin-top: 25px;
    background: red;
}

.clipMe {
    background: red;
    width: 640px;
    height: 640px;
    clip-path: url(#clip);
    -webkit-clip-path: url(#clip);
}