JSFiddle - React, Tailwind, and code Playground

by elcoyote67

HTML

<aside>
        <div class="spinner">
            <svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve">
				
				<path id="s4" opacity="0.8" fill="#0F293F" d="M78.1,53.9l-8.9-1c-2.8,10.3-11.9,18-23,18.6l-0.5,5.4h32.8L78.1,53.9z"/>
                
				<path id="s3" opacity="0.8" fill="#1D5570" d="M19.8,46.4c0-2.3,0.3-4.6,0.9-6.8l-9.8,0.9L9,76.9h30l1.1-5.8 C28.5,68.8,19.8,58.6,19.8,46.4z"/>
                
				<path id="s2" opacity="0.8" fill="#0DA1CF" d="M52.5,14.5L51.2,22c10.9,2.8,18.9,12.6,18.9,24.4c0,0.8,0,1.6-0.1,2.4l8.7-0.4 L81,11.1L52.5,14.5z"/>
				<path id="s1" opacity="0.8" fill="#56C9EE" d="M43.8,21.3v-6.8l-33.5-2.6L10.9,35l11.3,0.7C26.1,27.5,34.2,21.7,43.8,21.3z"/>
				<path id="gear" fill="#047092" d="M28.7,51.8l-4.5,3.8c0.6,1.4,1.3,2.7,2.2,3.9l5.5-1.8c0.8,1,1.8,1.9,2.8,2.6l-1.4,5.7
					c1.3,0.8,2.6,1.4,4.1,1.9l3.5-4.7c0.6,0.1,3.2,0.4,3.8,0.4l2.1,5.4c1.5-0.2,3-0.5,4.4-0.9l0.1-5.8c1.2-0.5,2.3-1.2,3.4-1.9l4.9,3
					c1.1-1,2.2-2.1,3.1-3.4l-3.3-4.7c0.7-1.1,1.2-2.3,1.7-3.5l5.8-0.5c0.2-0.7,0.6-3.8,0.6-4.5L62,45c-0.1-1.3-0.3-2.6-0.7-3.8l4.5-3.8
					c-0.6-1.4-1.3-2.7-2.2-4l-5.5,1.8c-0.8-1-1.8-1.9-2.8-2.6l1.4-5.7c-1.3-0.8-2.6-1.4-4.1-1.9l-3.5,4.7c-0.6-0.1-3.2-0.4-3.8-0.4
					L43.2,24c-1.5,0.2-3,0.5-4.4,0.9l-0.1,5.8c-1.2,0.5-2.4,1.2-3.4,1.9l-4.9-3c-1.1,1-2.2,2.1-3.1,3.4l3.3,4.7
					c-0.7,1.1-1.2,2.3-1.7,3.5l-5.8,0.5c-0.2,0.7-0.6,3.8-0.6,4.5L28,48C28.1,49.3,28.3,50.6,28.7,51.8z M36.1,47.1
					c-0.2-5,3.7-9.4,8.7-9.7c5-0.3,9.2,3.5,9.5,8.6c0.2,5-3.7,9.4-8.7,9.7C40.5,56,36.3,52.2,36.1,47.1z">
					<animateTransform attributeName="transform" type="rotate" from="0 45 46" to="360 45 46" dur="2.5s" repeatDur="indefinite"/>
				</path>
			</svg>
        </div>
    </aside>

</div>

CSS

body {
     background-image: url("http://i.imgur.com/S2CRGKb.png");
}

		aside {
		    max-width: 60px;
    margin-top: 150px; margin-left: 150px;
		}
		.spinner {
		    height: 0;
		    padding-top: 100%;
		    position: relative;

		}
		#s1 {
		    		    opacity: .7;
		    -webkit-animation: hideshow 2s ease infinite;
		    -moz-animation: hideshow 2s ease infinite;
		    animation: hideshow 2s ease infinite;
		}
		#s2 {
		    opacity: .7;
		    -webkit-animation: hideshow 2s 0.5s ease infinite;
		    -moz-animation: hideshow 2s 0.5s ease infinite;
		    animation: hideshow 2s 0.5s ease infinite;
		}
		#s3 {
		    opacity: .7;
		    -webkit-animation: hideshow 2s 1.5s ease infinite;
		    -moz-animation: hideshow 2s 1.5s ease infinite;
		    animation: hideshow 2s 1.5s ease infinite;
		}
		#s4 {
		    opacity: .7;
		    -webkit-animation: hideshow 2s 1s ease infinite;
		    -moz-animation: hideshow 2s 1s ease infinite;
		    animation: hideshow 2s 1s ease infinite;
		}
		@-webkit-keyframes hideshow {
		    0% { opacity: .7; }
		    00% { opacity: 1; }
		    100% { opacity: .7; }
		}
		@-moz-keyframes hideshow {
		    0% { opacity: 0; }
		    50% { opacity: 1; }
		    100% { opacity: 0; }
		}
		@keyframes hideshow {
		    0% { opacity: 0; }
		    50% { opacity: 1; }
		    100% { opacity: 0; }
		}