JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<div id="orrey" class="">

  <div id="nirn" class="planet center rotate"></div>
  
  <div id="orbit1" class="center orbit">
    <div id="julianos" class="planet rotate">
    
      <div id="stendarr-orbit" class="center orbit">
        <div id="stendarr" class="planet rotate"></div>
      </div>
      
    </div>
    
    <div id="akatosh" class="planet rotate"></div>
    
  </div>
  
  <div id="orbit2" class="center orbit">
    <div id="zenithar" class="planet rotate">
      
      <div id="mara-orbit" class="center orbit">
        <div id="mara" class="planet rotate">
        
          <div id="dibella-orbit" class="center orbit">
            <div id="dibella" class="planet rotate"></div>
          </div>

        </div>
      
      </div>
      
    </div>
  
  </div>
  
  <div id="orbit3" class="center orbit">
    <div id="secunda" class="planet center rotate"></div>
  </div>

  <div id="orbit4" class="center orbit">
    <div id="masser" class="planet center rotate"></div>
  </div>

  <div id="orbit5" class="center orbit">
    <div id="kynareth" class="planet center rotate"></div>
  </div>

  <div id="orbit6" class="center orbit">
    <div id="arkay" class="planet center rotate"></div>
  </div>

  
</div>

CSS

html {
  height: 100%;
  background: url(http://7-themes.com/data_images/out/46/6927874-space-the-stars.jpg) center center no-repeat;
  background-size: cover;
}

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#orrey {
  position: absolute;
  width: 100%;
  height: 100%;
}

#orrey.outline div {
  outline: 1px solid red;
  
}

.planet:before {
  z-index: 2;
  background-color: white;
}

#nirn {
  width: 200px;
  height: 200px;
}

#orbit1 {
  width: 800px;
  height: 800px;
  z-index: 6;
}

#julianos {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 160px;
  height: 160px;
  transform: translateX(-50%) translateY(-50%);
}

#akatosh {
  position: absolute;
  top: 50%;
  left: 0;
  width: 180px;
  height: 180px;
  transform: translateX(-50%) translateY(-50%);
}

#stendarr-orbit {
  position: absolute;
  width: 160%;
  height: 160%;
}

#stendarr {
  position: absolute;
  top: 50%;
  left: 0;
  width: 60px;
  height: 60px;
  transform: translateX(-50%) translateY(-50%);
}

#orbit2 {
  width: 600px;
  height: 600px;
  animation-duration: 30s;
  z-index: 5;
}

#zenithar {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translateX(-50%) translateY(-50%);
}

#mara-orbit {
  position: absolute;
  width: 210%;
  height: 210%;
}

#mara {
  position: absolute;
  top: 50%;
  left: 0;
  width: 50px;
  height: 50px;
  transform: translateX(-50%) translateY(-50%);
}

#dibella-orbit {
  position: absolute;
  width: 180%;
  height: 180%;
}

#dibella {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  transform: translateX(-50%) translateY(-50%);
}

#orbit3 {
  width: 400px;
  height: 400px;
  animation-duration: 15s;
  animation-direction: reverse;
  z-index: 4;
}

#masser {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  height: 100px;
  transform: translateX(-50%) translateY(-50%);
}

#orbit4 {
  width: 360px;
  height: 360px;
  animation-duration: 14s;
 ...

JavaScript

/**
 * StyleFix 1.0.3 & PrefixFree 1.0.7
 * @author Lea Verou
 * MIT license
 */
(function(){function k(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(window.addEventListener){var e=window.StyleFix={link:function(a){try{if("stylesheet"!==a.rel||a.hasAttribute("data-noprefix"))return}catch(b){return}var c=a.href||a.getAttribute("data-href"),d=c.replace(/[^\/]+$/,""),h=(/^[a-z]{3,10}:/.exec(d)||[""])[0],l=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(d)||[""])[0],g=/^([^?]*)\??/.exec(c)[1],m=a.parentNode,f=new XMLHttpRequest,n;f.onreadystatechange=function(){4===f.readyState&&
n()};n=function(){var b=f.responseText;if(b&&a.parentNode&&(!f.status||400>f.status||600<f.status)){b=e.fix(b,!0,a);if(d)var b=b.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(b,a,c){return/^([a-z]{3,10}:|#)/i.test(c)?b:/^\/\//.test(c)?'url("'+h+c+'")':/^\//.test(c)?'url("'+l+c+'")':/^\?/.test(c)?'url("'+g+c+'")':'url("'+d+c+'")'}),c=d.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1"),b=b.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+c,"gi"),"$1");c=document.createElement("style");c.textContent=
b;c.media=a.media;c.disabled=a.disabled;c.setAttribute("data-href",a.getAttribute("href"));m.insertBefore(c,a);m.removeChild(a);c.media=a.media}};try{f.open("GET",c),f.send(null)}catch(p){"undefined"!=typeof XDomainRequest&&(f=new XDomainRequest,f.onerror=f.onprogress=function(){},f.onload=n,f.open("GET",c),f.send(null))}a.setAttribute("data-inprogress","")},styleElement:function(a){if(!a.hasAttribute("data-noprefix")){var b=a.disabled;a.textContent=e.fix(a.textContent,!0,a);a.disabled=b}},styleAttribute:function(a){var b=
a.getAttribute("style"),b=e.fix(b,!1,a);a.setAttribute("style",b)},process:function(){k('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);k("style").forEach(StyleFix.styleElement);k("[style]").forEach(StyleFix.styleAttribute)},register:function(a,b){(e.fixers=e.fixers||[]).splice(void 0===b?e.fixers.length:b,0,a)},fix:function(a,b,c){for(var...