JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="559px" height="509px" viewBox="0 0 559 509" style="enable-background:new 0 0 559 509;" xml:space="preserve">
<rect style="fill:#ADDDD9;" width="559" height="346.7"/>
<g id="pine">
	<polygon style="fill:#B8B6DA;" points="167.9,248.6 225.5,14.8 283,248.6 	"/>
	<g>
		
			<line style="fill:none;stroke:#8D6EA9;stroke-width:3.6109;stroke-linecap:round;stroke-miterlimit:10;" x1="225.5" y1="334.9" x2="225.5" y2="79.2"/>
		
			<line style="fill:none;stroke:#8D6EA9;stroke-width:3.6109;stroke-linecap:round;stroke-miterlimit:10;" x1="205.5" y1="151.4" x2="225.5" y2="169.3"/>
		<polyline style="fill:none;stroke:#8D6EA9;stroke-width:3.6109;stroke-linecap:round;stroke-miterlimit:10;" points="198.5,204.3 
			225.5,238.7 248.9,211.1 		"/>
		<polyline style="fill:none;stroke:#8D6EA9;stroke-width:3.6109;stroke-linecap:round;stroke-miterlimit:10;" points="211.6,102.9 
			225.3,123.7 239.4,116.6 		"/>
		
			<line style="fill:none;stroke:#8D6EA9;stroke-width:3.6109;stroke-linecap:round;stroke-miterlimit:10;" x1="247.7" y1="139.3" x2="227.4" y2="161.8"/>
	</g>
    
    
         
</g>
  </svg>

CSS

@-webkit-keyframes breeze{
	0% {-webkit-transform: rotate(0deg);}
	50% {-webkit-transform: rotate(3deg);}
	100% {-webkit-transform: rotate(0deg);}
}

@keyframes breeze{
	0% {transform: rotate(0deg);}
	50% {transform: rotate(3deg);}
	100% {transform: rotate(0deg);}
}
		#pine{
			-webkit-transform-origin: 50% 100%;
			-webkit-animation: breeze 5s ease-out infinite;
           	transform-origin: 50% 100%;
			animation: breeze 5s ease-out infinite;
		
		}