JSFiddle - React, Tailwind, and code Playground

by MoonMay

HTML

<div class="space-container">
            <div class="space-system">
                <div class="sun">
                    <img src="css/image/sun.png" style="position: absolute; height: 60px; width: 60px;" id="sun">
                </div>                
                <div class="earth">
                    <div style="position: absolute;" id="earth">
                        <img id="moon" src="css/image/moon.png">                         
                        <img src="css/image/earth2.png" style="height: 30px; width: 30px;">                       
                    </div>
                </div>
            </div>
        </div>

CSS

body {
    margin: 0px;
}

.space-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
    background-color: black;
}

.space-system {
    height: 300px;
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%; 
    margin: -150px 0 0 -150px;
}

.sun {
    position: absolute;
    height: 60px;
    width: 60px;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
}

.earth {
    position: absolute;
    height: 30px;
    width: 30px;    
    top: 50%;
    left: 50%;
    margin: -15px 0 0 -15px;    
}

#moon {
    position: absolute;
    height: 15px;
    width: 15px;
    top: 50%;
    left: 50%;  
    margin: -7px 0 0 -7px;      
}

JavaScript

animation(moon,3,20,40);            
        animation(earth,0.4,20,200);
        function animation(elem,speed,delay,distance) {
        	var x = 0;
        	var s = speed * Math.PI / 180;
        	setInterval(function() {
                    x += s;
                    elem.style.left = distance * Math.sin(x) + "px";
                    elem.style.top = distance * Math.cos(x) + "px";
                  }, delay);
        }