JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<svg id="svg" preserveAspectRatio="none" width="1920px" height="1080px" viewBox="0 0 1920 1080">
 <g transform="matrix(1, 0, 0, 1, 2.842170943040401e-14, 7.105427357601002e-15)">
		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="207.8967" y1="293.7241" x2="284.799" y2="293.7241">
			<stop offset="0" style="stop-color:#698839"></stop>
			<stop offset="1.609480e-02" style="stop-color:#6A8939"></stop>
			<stop offset="0.6554" style="stop-color:#85AC3B"></stop>
			<stop offset="1" style="stop-color:#90B93C"></stop>
		</linearGradient>
		<path class="st0" d="M284.8,225.4c-42.3,21.8-71.5,42.3-76.9,72.5c5,16.2,9.3,32.7,11.4,49.5c0.2,1.9-1.2,3.6-3,4.4
			c0.7,1.9,1.5,3.7,2.4,5.5c11.6-70.4,31.3-85.9,31.3-85.9c-24.7,35.7-21.8,90.7-21.8,90.7c39.8-36.2,56.4-73,50.7-98.3
			C273.2,238.2,284.8,225.4,284.8,225.4z" style="fill: url(&quot;#SVGID_1_&quot;);"></path>
		<path class="st1" d="M207.9,297.9c0.9,2.8,1.7,5.6,2.5,8.5c2.9-37.9,46.1-61.1,72.9-79c1.8-3.9,1.4-2,1.4-2
			C242.5,247.2,213.3,267.7,207.9,297.9z" style="opacity: 0.32; fill: rgb(255, 255, 255);"></path>
		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="218.9471" y1="379.377" x2="131.2358" y2="236.0929">
			<stop offset="0" style="stop-color:#698839"></stop>
			<stop offset="1.609480e-02" style="stop-color:#6A8939"></stop>
			<stop offset="0.6554" style="stop-color:#85AC3B"></stop>
			<stop offset="1" style="stop-color:#90B93C"></stop>
		</linearGradient>
		<path class="st2" d="M218.2,360.4c0,0,35-120.3-110.4-127.3c0,0,17,25.8,21.7,60.1c3.9,28.6,13.9,77.3,75.7,74.9
			c0,0-39.8-90.1-60.1-107.9C145,260.2,200.4,307.5,218.2,360.4z" style="fill: url(&quot;#SVGID_2_&quot;);"></path>
		<path class="st1" d="M218.2,360.4c0,0,35-120.3-110.4-127.3C120.1,240.4,230.7,242.3,218.2,360.4z" style="opacity: 0.32; fill: rgb(255, 255, 255);"></path>
	</g>
      </svg>