JSFiddle - React, Tailwind, and code Playground

by elcoyote67

HTML

<script src="buildandbuy.com/o_edgePreload.js"></script>
<script src="buildandbuy.com/o_edgeActions.js"></script>
<script src="http://buildandbuy.com/o_edge.js"></script>
<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="15px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 15.96 16.109" xml:space="preserve">
<g class="animation">
	<defs>
		<circle id="SVGID_1_" cx="8" cy="8" r="8"/>
	</defs>
	<clipPath id="SVGID_2_">
		<use xlink:href="#SVGID_1_"  overflow="visible"/>
	</clipPath>
	<path clip-path="url(#SVGID_2_)" fill="#FF7200" d="M10.489,8.256l5.465,0.75C15.983,8.867,16,8.15,16,8.006
		c0-0.15-0.02-0.854-0.052-1l-5.479,0.75C10.492,7.863,10.513,8.146,10.489,8.256z"/>
	<path opacity="0.9" clip-path="url(#SVGID_2_)" fill="#FF8F00" d="M7.757,5.514l-0.75-5.465c0.14-0.029,0.856-0.045,1-0.045
		c0.15,0,0.854,0.02,1,0.051l-0.75,5.479C8.15,5.511,7.868,5.49,7.757,5.514z"/>
	<path opacity="0.9" clip-path="url(#SVGID_2_)" fill="#FF8300" d="M9.034,5.723l2.082-5.107c0.137,0.045,0.765,0.389,0.889,0.461
		c0.131,0.075,0.73,0.443,0.842,0.544L9.456,5.99C9.376,5.917,9.142,5.758,9.034,5.723z"/>
	<path opacity="0.9" clip-path="url(#SVGID_2_)" fill="#FF7C00" d="M10.036,6.544l4.357-3.383c0.096,0.107,0.467,0.719,0.539,0.844
		c0.075,0.131,0.41,0.749,0.457,0.892l-5.122,2.089C10.235,6.882,10.112,6.628,10.036,6.544z"/>
	<path opacity="0.9" clip-path="url(#SVGID_2_)" fill="#FF5D00" d="M10.278,9.03l5.107,2.083c-0.045,0.137-0.389,0.765-0.461,0.889
		c-0.075,0.131-0.443,0.73-0.544,0.842l-4.37-3.393C10.084,9.372,10.243,9.138,10.278,9.03z"/>
	<path clip-path="url(#SVGID_2_)" fill="#FF7200" d="M9.457,10.031l3.382,4.358c-0.107,0.096-0.719,0.467-0.844,0.539
		c-0.131,0.075-0.749,0.41-0.892,0.457l-2.088-5.123C9.119,10.23,9.373,10.107,9.457,10.031z"/>
	<path clip-path="url(#SVGID_2_)" fill="#FF5D00"...

CSS

@-webkit-keyframes rotate{
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes rotate{
    100%{
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate{
    100%{
        transform: rotate(360deg);
    }
}

.animation{
    -webkit-animation: rotate 300ms linear infinite;
    animation: rotate 300ms linear infinite;
    
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;
}