JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<!--
<div id="div1">
    Yay for CSS3
</div>
-->

<div id="svgContain">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="24.576px" height="24.577px" viewBox="0 0 24.576 24.577" enable-background="new 0 0 24.576 24.577" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<g>
	<path d="M12.288,0C5.502,0,0,5.501,0,12.289c0,6.786,5.502,12.288,12.288,12.288s12.288-5.502,12.288-12.288 C24.576,5.501,19.074,0,12.288,0z M12.167,17.238c0.062,0.064,0.127,0.098,0.195,0.098c0.115,0,0.232-0.053,0.348-0.154   c0.309-0.252,0.678-0.711,1.107-1.375l0.35,0.205c-1.033,1.799-2.131,2.697-3.291,2.697c-0.445,0-0.799-0.125-1.062-0.373   c-0.264-0.25-0.395-0.566-0.395-0.949c0-0.252,0.059-0.574,0.174-0.965l1.426-4.9c0.137-0.473,0.205-0.827,0.205-1.066   c0-0.15-0.064-0.284-0.195-0.4c-0.129-0.116-0.307-0.174-0.533-0.174c-0.102,0-0.225,0.003-0.369,0.01l0.135-0.41l3.475-0.564   h0.615l-2.102,7.291c-0.117,0.418-0.174,0.691-0.174,0.82C12.075,17.103,12.106,17.173,12.167,17.238z M14.782,6.773   c-0.295,0.294-0.65,0.441-1.066,0.441c-0.41,0-0.764-0.147-1.057-0.441c-0.295-0.294-0.441-0.649-0.441-1.066   s0.146-0.772,0.436-1.066c0.291-0.294,0.645-0.441,1.062-0.441c0.424,0,0.781,0.147,1.07,0.441   c0.291,0.294,0.438,0.649,0.438,1.066S15.075,6.479,14.782,6.773z" />
</g>
</svg>
</div>

CSS

@-webkit-keyframes spin{
    0% {
        -webkit-transform: rotateY(0deg); 
    }
    50% {    
        -webkit-transform: rotateY(180deg);
    }
    100% {    
        -webkit-transform: rotateY(0deg);
    }
}
#svgContain:hover {
    position: absolute;
    width: auto;
    height: auto;
    -webkit-animation: spin 0.25s;
    cursor: pointer;
}
#svgContain:hover path{
    fill: orange;
    transition: fill 0.25s;
}
path{
    fill: blue;
}