JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<div id="container"></div>

JavaScript

$(document).ready(function() {
    
    //initialize stage:
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 640,
        height: 480
    });

    var layer = new Kinetic.Layer({});

    //create our sun system
    var sunSystem = new Kinetic.Group({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        draggable: true
    });

    //create the sun
    var sun = new Kinetic.Circle({
        x: 0,
        y: 0,
        radius: 20,
        fill: '#ffbf00',
        stroke: '#f33',
        strokeWidth: 2
    });


    //create the earthGroup
    var earthGroup = new Kinetic.Group({
        x: 100,
        y: 0
    });

    //create the marsGroup
    var marsGroup = new Kinetic.Group({
        x: 200,
        y: 0
    });


    //create the earth
    var earth = new Kinetic.Circle({
        x: 0,
        y: 0,
        radius: 10,
        fill: '#3333ff',
        stroke: '#33f',
        strokeWidth: 2
    });


    //create the mars
    var mars = new Kinetic.Circle({
        x: 0,
        y: 0,
        radius: 15,
        fill: '#f33',
        stroke: '#33f',
        strokeWidth: 2
    });


    //create the moon
    var moon = new Kinetic.Circle({
        x: 30,
        y: 0,
        radius: 5,
        fill: '#ff3',
        stroke: '#000',
        strokeWidth: 2
    });


    var marsMoon1 = new Kinetic.Circle({
        x: 30,
        y: 0,
        radius: 5,
        fill: '#ff3',
        stroke: '#000',
        strokeWidth: 2
    });
    var marsMoon2 = new Kinetic.Circle({
        x: -30,
        y: 0,
        radius: 5,
        fill: '#ff3',
        stroke: '#000',
        strokeWidth: 2
    });
    var marsMoon3 = new Kinetic.Circle({
        x: 0,
        y: 30,
        radius: 5,
        fill: '#ff3',
        stroke: '#000',
        strokeWidth: 2
    });
    var marsMoon4 = new Kinetic.Circle({
        x: 0,
        y: -30,
        radius: 5,
        fill: '#ff3',
        stroke: '#000',
       ...