JSFiddle - React, Tailwind, and code Playground

by maxsof

HTML

<div class='description'>
  <h1>Solar System</h1>
  <hr>
  <p>
    I know this is not the first one on CodePen, but I'm a space and physics lover, and I wanted to create mine :)
  </p>
  <p>
    Here is a true time scaled solar-system, which means that every objects have a time relative to an Earth year.
    You can change the number in second of the
    <br>
    <code>$year-in-second</code>
    variable to increase the speed of revolutions. Here 1 year = 30 seconds.
  </p>
  <p class='hide'>
    Note the css tricks for the Saturn rings (box-shadow) and reverse animation to compensate the orbit.
  </p>
  <hr>
  <p class='author'>
    Made with
    <i class='fa fa-heart'></i>
    by Malik Dellidj
  </p>
  <p class='links'>
    <a class='fa fa-codepen icon' href='http://codepen.io/kowlor/' target='_blank'></a>
    <a class='fa fa-github-alt icon' href='https://github.com/KOWLOR' target='_blank'></a>
    <a class='fa fa-twitter icon' href='https://twitter.com/Dathink' target='_blank'></a>
  </p>
</div>
<div class='solar-syst'>
  <div class='sun'></div>
  <div class='mercury'></div>
  <div class='venus'></div>
  <div class='earth'></div>
  <div class='mars'></div>
  <div class='jupiter'></div>
  <div class='saturn'></div>
  <div class='uranus'></div>
  <div class='neptune'></div>
  <div class='pluto'></div>
  <div class='asteroids-belt'></div>
</div>

CSS

/*
  Malik Dellidj - @Dathink

  Solar System orbit animation true time scaled

  Revolution of planets in earth days (from Wikipedia)
  Mercury : ~87,5 days
  Venus : ~224,7 days
  Earth : ~365,2563 days
    + Moon : ~27,3216 days (around earth)
  Mars : ~687 days (~1,8 year)
  Jupiter : ~4 331 days (~12 years)
  Saturn : ~10 747 days (~30 years)
  Uranus : ~30 589 days (~84 years)
  Neptune : ~59 802 days (~165 years)
  Pluto : ~90 580 days (~248 years)
*/
*, *:before, *:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  font: normal 1em/1.45em "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #fff;
  background: -webkit-radial-gradient(ellipse at bottom, #1c2837 0%, #050608 100%);
  background: radial-gradient(ellipse at bottom, #1c2837 0%, #050608 100%);
  background-attachment: fixed;
}

h1 {
  font-weight: 300;
  font-size: 2.5em;
  text-transform: uppercase;
  font-family: Lato;
  line-height: 1.6em;
  letter-spacing: .1em;
}

a, a:visited {
  text-decoration: none;
  color: white;
  opacity: .7;
}
a:hover, a:visited:hover {
  opacity: 1;
}
a.icon, a:visited.icon {
  margin-right: 2px;
  padding: 3px;
}

.description {
  padding: 30px;
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  z-index: 999;
}
.description p {
  font-size: .9em;
}
.description p + p {
  margin-top: 20px;
}
.description p.author {
  font-size: .7em;
}
.description p.author .fa-heart {
  color: #860014;
}

hr {
  margin: 26px 0;
  border: 0;
  border-top: 1px solid white;
  background: transparent;
  width: 25%;
  opacity: .1;
}

code {
  color: #ae94c0;
  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
  font-size: .9em;
}

.solar-syst {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.solar-syst:after {
  content: "";
  position: absolute;
  height: 2px;
  width: 2px;
  top: -2px;
  background: white;
  box-shadow:...