JSFiddle - React, Tailwind, and code Playground

by dave ho

HTML

<svg height="0" width="0" style="float:left;">
            <defs>
                <clipPath id="clip_hdr-nipple">
                    <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"/>
         
            </defs>
        </svg>
        
        <div id="nipple-wrap">
            <div id="nipple_hdr"> </div>
        </div>

CSS

#nipple_hdr {
		clip-path: url(#clip_hdr-nipple);
		-webkit-clip-path: url(#clip_hdr-nipple);
	}

#subSubHdr #nipple_hdr,
#nipple_hdr {

    width: 300px;
    height: 210px;
    background: #4885ce;
    
    /*
-webkit-transform: translateZ(0px);    
    margin-left: 105px;
    */
}