Solar System Orbit Animation - Copy this React, Tailwind Component to your project

Prompt: description: > Create an animation of the solar system in pure CSS that mirrors the provided image. The animation should include the Sun and all eight planets (Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, and Neptune) orbiting around it. Each planet should follow its own orbit, and the animation should be smooth and continuous. layout: sun: size: large color: yellow position: center planets: name: Mercury size: small color: gray orbit: radius: 50px speed: 10s name: Venus size: small color: orange orbit: radius: 70px speed: 20s name: Earth size: medium color: blue orbit: radius: 90px speed: 30s name: Mars size: small color: red orbit: radius: 110px speed: 40s name: Jupiter size: large color: orange orbit: radius: 130px speed: 50s name: Saturn size: large color: yellow orbit: radius: 150px speed: 60s name: Uranus size: medium color: lightblue orbit: radius: 170px speed: 70s name: Neptune size: medium color: blue orbit: radius: 190px speed: 80s details: orbits: color: white thickness: 1px style: dotted planets: labels: true label_position: below background: color: darkblue stars: true animation: smooth_transition: true continuous_loop: true technologies: description: > Use pure CSS to achieve the animation. Ensure each planet has its own unique orbit path and speed. Utilize keyframes for smooth and continuous orbit animations.