JSFiddle - React, Tailwind, and code Playground

by elcoyote67

HTML

<table cellspacing=0 cellpadding=0 border=0 width="266" height="126" align=center style="margin-top: 165px;">
<tr><td style="background-image: url(http://buildandbuy.com/Untitled-3.png); background-repeat: no-repeat;" valign=top  >
    <table style="margin-top: 35px; margin-left:20px"><tr><td>
   <svg class="animation" 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="18.886px" height="18.891px" viewBox="0 0 18.886 18.891" enable-background="new 0 0 18.886 18.891" xml:space="preserve">
<circle fill="#FFFFFF" cx="9.5" cy="9.449" r="8.5"/>
<path fill="#135371" d="M9.5,1.699v3.696c1.041-0.004,2.071,0.426,2.793,1.26l2.747-2.746C13.578,2.438,11.541,1.697,9.5,1.699z"/>
<path fill="#2CB7E0" d="M6.727,12.221l-2.763,2.763c1.459,1.471,3.494,2.211,5.535,2.213v-3.712
	C8.463,13.48,7.442,13.05,6.727,12.221z"/>
<path fill="#3FCBEF" d="M12.251,12.242c-0.722,0.825-1.753,1.248-2.793,1.243v3.712c2.042,0.001,4.08-0.739,5.542-2.206
	L12.251,12.242z"/>
<path fill="#66DAF7" d="M13.098,9.449c0.003,1.206-0.384,2.127-0.967,2.793l2.749,2.749c1.282-1.286,2.124-3.129,2.12-5.542H13.098z
	"/>
<path fill="#167092" d="M3.966,3.915l2.756,2.757C7.438,5.834,8.461,5.399,9.5,5.395V1.699C7.459,1.701,5.425,2.445,3.966,3.915z"/>
<path fill="#1CA7D2" d="M5.774,9.464c0-0.006,0.001-0.01,0.001-0.016H1.851c0,0.009-0.001,0.018-0.001,0.026
	c0.006,2.397,0.842,4.229,2.114,5.509l2.763-2.763C6.156,11.56,5.777,10.652,5.774,9.464z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.8467" y1="6.6787" x2="17.1615" y2="6.6787">
	<stop  offset="0" style="stop-color:#10293F"/>
	<stop  offset="1" style="stop-color:#10293F"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M15.04,3.909l-2.747,2.746c0.578,0.668,0.963,1.588,0.966,2.793v0.001h3.902
	c0-0.004,0.001-0.008,0.001-0.012C17.156,7.03,16.316,5.192,15.04,3.909z"/>
<path fill="#1891BA"...

CSS

body { background-color: #f3f3f3; background-image: url(https://sites.google.com/a/sendpepper.com/3-0-documentation/dialogs/Untitled-2.png); background-repeat:no-repeat;}

@-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;
}