JSFiddle - React, Tailwind, and code Playground
by Oliver_kh
HTML
<img id="sun" src="http://goo.gl/LfTWuT">
<!-- Insert the 'earth' on the next line -->
<div id="earth-orbit">
<div class="m">
<div class="mo"></div>
<img id="earth" src="http://goo.gl/IYzHYv" />
</div>
</div>CSS
body {
/* The universe is black */
background-color: black;
width: 100%;
height: 100%;
}
#sun {
/* Style your sun */
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
margin-top: -50px;
margin-left: -50px;
border-color: #dddd00;
border-width: 8px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 128px orangered;
}
#earth {
position: absolute;
top: 7px;
left: 7px;
height: 50px;
width: 50px;
-webkit-animation: spin-left 5s linear infinite;
-moz-animation: spin-left 5s linear infinite;
animation: spin-left 5s linear infinite;
}
#earth-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin-top: -150px;
margin-left: -150px;
-webkit-animation: spin-right 10s linear infinite;
-moz-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;
}
.m {
width: 65px;
height: 65px;
position:relative;
text-align:center;
top: 36px;
}
.mo {
position: absolute;
width: 65px;
height: 65px;
-webkit-animation: spin-left 1s linear infinite;
-moz-animation: spin-left 1s linear infinite;
animation: spin-left 1s linear infinite;
}
.mo:before {
...