JSFiddle - React, Tailwind, and code Playground

by dave ho

HTML

<header>&nbsp;</header>
<header id="sub">
    <div id="ind"> </div>
</header>
        <svg height="0" width="0">
            <defs>
                <clipPath id="clip">
                    <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>

CSS

header {
    background: #c00;
    height: 200px;
}
header#sub {
    background: transparent;
    height: 31px;
}
#ind {
    margin-left: 150px;
    width: 20px;
    height: 31px;
    background: #c00;
    clip-path: url(#clip);
}