JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 300 282.47437" class="panel-2">
     <defs
				 id="defs3053">
				<linearGradient
				   id="linearGradient3897">
				  <stop
					 id="stop3899"
					 style="stop-color:#282828;stop-opacity:1"
					 offset="0" />
				  <stop
					 id="stop3901"
					 style="stop-color:#161616;stop-opacity:1"
					 offset="1" />
				</linearGradient>
				<radialGradient
				   cx="214.41734"
				   cy="475.73941"
				   r="150.5"
				   fx="214.41734"
				   fy="475.73941"
				   id="radialGradient3909"
				   xlink:href="#linearGradient3897"
				   gradientUnits="userSpaceOnUse"
				   gradientTransform="matrix(0.2897714,1.1015688,-1.5801648,0.73906298,951.79987,-143.74246)" />
			  </defs>
	    <g transform="translate(-200,-356.72993)" id="layer2">
		   <path d="m 200,639.2043 300,0 0,-280.56692 c 0,0 -54.42824,-13.38012 -149.6732,30.73468 C 273.74938,424.84057 200,398.89784 200,398.89784 z" 
            id="path3067"   
            style="fill:url(#radialGradient3909);fill-opacity:1;stroke:none" />
		 </g>
	</svg>