JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1"
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" 
        x="0px" y="0px" width="800" height="600" viewBox="-400 -300 800 600" xml:space="preserve" font-family="arial" font-size="14" style='background-color: none;'>

            <defs>
<g id="trans_current.changing" cursor="pointer" transform="scale(0.01, 0.01)" stroke-width="2">
<path fill="none" stroke="#00B0F0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M2.3-9.1c-2.6,0-4.7,2.2-4.7,4.9c0,2.6,2.1,4.7,4.7,4.7c-2.6,0-4.7,1.9-4.7,4.5s2.1,4.6,4.6,4.6 M0.6,14v-28"/>
<path fill="red" stroke="none" d="M-1,4.7C-2.5,7.3-3.9,8-5.8,7.6c-1.4-0.3-2.5-1.2-4-1.3c0.7-0.4,1.3-0.6,2-0.6c-1.6-1.3-3.8-2.1-6.1-2.2
	c0,0,2-3.4,5-3.6c-0.6-0.3-1.6-0.4-2.2-0.1c0.6-0.9,6.3-6,10.1,0.7c-2.5-1.3-5.7-0.3-7.3,1.9c0.6-0.1,3.1,0.1,4.2,1.1
	C-5.9,3-6.6,3.6-6.6,3.6s1,0.2,2,0.9C-3.7,5.1-2.7,5.5-1,4.7">
	<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="10s" keyTimes="0;0.5;1" values="1.8;1.1;0.6"  repeatCount="indefinite"/>
    <animate attributeName="fill" dur="10s" values ="red; lightgrey; red; blue; red" fill="freeze"  repeatCount="indefinite" />
	</path>
</g>

<g id="trans_current.fire" cursor="pointer" transform="scale(0.01, 0.01)" stroke-width="2">
<g transform="matrix(1 0 1.5 1 -1 -4)">
    <g>
	<path stroke="none" fill="#E7E7E7" d="M-59.5-24.4c-29-12.6-21.8-45.3-21.8-45.3s25.7,19.4,44,13.6C3.3-45.8,3.6-15.7-3.5-4.4		C-10.6,0.4-19.1-25.4-59.5-24.4z"/>
	<path stroke="none" fill="#D7D7D7" d="M-7.8-11.4l-13.3-14.5c0,0-4.7-3.6-13.8-3.3c-28.4-3.7-24.8-25.9-24.8-25.9s9.9,10.9,34.4,7.5
		C3.9-31.6-7.8-11.4-7.8-11.4z">
        <animate attributeName="fill" dur="4s" values ="lightgrey; #E2E2E2; lightgrey;" fill="freeze"  repeatCount="indefinite" />
    </path>
    <animateTransform attributeType="XML" attributeName="transform" type="scale" dur="4s" keyTimes="0;0.5;1" values="1;1.4;1.8" fill="freeze"...