JSFiddle - React, Tailwind, and code Playground

HTML

<div>
                This animated infographic by <a href="http://www.doodleairlines.com" target="portfolio">José-Luis Olivares</a> was created with work from the Public Domain, as well as Creative Commons photographs from Flickr users <a href="http://www.flickr.com/photos/peteg/9301811428/" target="new">Pete Geniella</a>, <a href="http://www.flickr.com/photos/49937157@N03/7574383222/" target="new">A. Sparrow</a>,<br> <a href="http://www.flickr.com/photos/navtombrosphotography/5931562234/" target="new">Nav Tombros</a>, and <a href="http://www.flickr.com/photos/thelifeofbryan/125499089/" target="new">Bryan</a>. Information about the atmosphere is from <a href="http://en.wikipedia.org/wiki/Atmosphere_of_Earth" target="new">Wikipedia</a>. CSS Animation coding from <a href="http://jsfiddle.net" target="new">JSFiddle</a>.
        </div>
<div id="container">
    <img class="image" src="http://doodleairlines.com/Atmosphere_Back.png" alt="" width="1200" height="1200">
    <div id="img1">
        <img class="berry" src="http://doodleairlines.com/Atmosphere_Front.png" alt="" width="1200" height="1200">
    </div>
</div>

CSS

#container {
    position: relative;
}
#img1 {
    position: relative;
}
.image {
    position: relative;
    margin:0 0 -1205px 0;
    -webkit-animation:spin 40s linear infinite;
    -moz-animation:spin 40s linear infinite;
    animation:spin 40s linear infinite;
}
.berry {
    position: absolute;
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}