JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <div class='sun'></div>
  <div class='mercury-orbit'>
    <div class='mercury'>.</div>
  </div>
  <div class='venus-orbit'>
    <div class='venus'>.</div>
  </div>
  <div class='earth-orbit'>
    <div class='earth'>.</div>
  </div>
  <div class='mars-orbit'>
    <div class='mars'>.</div>
  </div>
</main>

CSS

main {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  color: white;
}

.sun {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid orange;
  background-color: yellow;
}

.mercury-orbit {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  border: 1px solid black;
  animation: revolve 2.4s linear infinite;
}

.mercury {
  position: absolute;
  top: 17px;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background-color: gray;
  animation: revolve 293s linear infinite;
}

.venus-orbit {
  position: absolute;
  display: inline-block;
  width: 180px;
  height: 180px;
  border-radius: 180px;
  border: 1px solid black;
  animation: revolve 6.2s linear infinite;
}

.venus {
  position: absolute;
  top: 17px;
  width: 38px;
  height: 38px;
  border-radius: 38px;
  background-color: orange;
  animation: revolve 1215s linear infinite;
}

.earth-orbit {
  position: absolute;
  display: inline-block;
  width: 280px;
  height: 280px;
  border-radius: 180px;
  border: 1px solid black;
  animation: revolve 10s linear infinite;
}

.earth {
  position: absolute;
  top: 50px;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: deepskyblue;
  animation: revolve 5s linear infinite;
}

.mars-orbit {
  position: absolute;
  display: inline-block;
  width: 400px;
  height: 400px;
  border-radius: 400px;
  border: 1px solid black;
  animation: revolve 18s linear infinite;
}

.mars {
  position: absolute;
  top: 127px;
  width: 21px;
  height: 21px;
  border-radius: 21px;
  background-color: darkred;
  animation: revolve 5s linear infinite;
}

@keyframes revolve {
  100% { transform: rotate(360deg); }
}