JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            /* background: url('./bg.png'); */
        }

        svg {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <svg viewBox="0 0 500 500">

        <!-- sun -->
        <circle cx="250" cy="250" r="30" style="stroke: none; fill:
        #fffb00;"></circle>

        <!-- mercury -->
        <circle cx="215" cy="215" r="8" style="stroke: none; fill:
        #502d05;">
            <animateTransform attributeName="transform" type="rotate" from="0
            250 250" to="360 250 250" begin="0s" dur="1.7s" repeatCount="indefinite" />
        </circle>

        <!-- venus -->
        <circle cx="195" cy="195" r="10" style="stroke: none; fill:
        #eb9b40;">
            <animateTransform attributeName="transform" type="rotate" from="0
            250 250" to="360 250 250" ) begin="0s" dur="4s" repeatCount="indefinite" />
        </circle>

        <!-- earth -->
        <circle cx="170" cy="170" r="12" style="stroke: none; fill:
        #040e9e;">
            <animateTransform attributeName="transform" type="rotate" from="0
            250 250" to="360 250 250" scale(1 1) begin="0s" dur="7s" repeatCount="indefinite" />
        </circle>

        <!-- moon -->
        <circle cx="157" cy="157" r="3" style="stroke: none; fill:
        #040e9e;">
            <animateTransform attributeName="transform" type="rotate" from="0
            170 170" to="360 250 250" begin="0s" dur="10s" repeatCount="indefinite" />
        </circle>

        <!-- mars -->
        <circle cx="145" cy="145" r="11" style="stroke: none; fill:
    ...