JSFiddle - React, Tailwind, and code Playground

by dave ho

HTML

<div class="clipMe" id="clipped1"> </div>
<svg height="0" width="0" style="float:left;">
            <defs>
                <clipPath id="clip" clipPathUnits="XobjectBoundingBox">
                    <path fill="#000000" d="M0,0.01c3.472,1.088,6.688,3.663,7.878,9.208c1.604,7.482,4.305,11.862,7.102,11.79v0.003
            c0.007,0.001,0.014-0.001,0.02-0.001c0.007,0,0.014,0.002,0.021,0.001v-0.003c2.797,0.072,5.499-4.308,7.103-11.79
            C23.312,3.672,26.527,1.098,30,0.01H0z"/>
                </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: 30px;
    height: 21px;
    clip-path: url(#clip);
    -webkit-clip-path: url(#clip);
}