JSFiddle - React, Tailwind, and code Playground

by elcoyote67

HTML

<div class="spinner" style="margin-top: 300px; margin-left: 150px; opacity: 0.8; "> 
    <img src="http://buildandbuy.com/gear.gif" class="gif">
</div>

CSS

body {
     background-image: url("http://content.screencast.com/users/elcoyote/folders/Jing/media/71166ecb-ce30-4439-b4bd-c7b5fd76dce4/00004260.png"); 
        background-repeat: no-repeat;
}
.spinner {
     background-image: url("http://buildandbuy.com/drop-shadow.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 400ms linear infinite;
    animation: rotate 400ms linear infinite;
    
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;
}