JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title>Orbiting Planets</title>
	<style>
		body {
			margin: 0px;
			overflow: hidden;
		}
	</style>
</head>

<body>
    <canvas id="sky"></canvas>
    <script>
		// Get the canvas and set up some parameters.
		var canvas = document.getElementById("sky");
		var context = canvas.getContext("2d");
		var starCount = 200;
		var canvasWidth = window.innerWidth;
		var canvasHeight = window.innerHeight;

		// Set the canvas size.
		canvas.width = canvasWidth;
		canvas.height = canvasHeight;
		
		// Store star data
		storedStars = new Array();
		for (var i = 0; i < starCount; i++) {
			storedStars[i] = {radius: 0, x: 0, y:0, bluramount: 0};
			storedStars[i].radius = 1 + Math.random() * 2;
			storedStars[i].x = canvasWidth * Math.random();
			storedStars[i].y = canvasHeight * Math.random();
			storedStars[i].bluramount = 1 + Math.random() * 4 * storedStars[i].radius;
		}

		function drawBackground() {
			// Background.
			// We create a radial gradient from the bottom-left.
			var gradient = context.createRadialGradient(0, canvasHeight, 0, 0, canvasHeight, 1000);
			gradient.addColorStop(0, "#151530");
			gradient.addColorStop(1, "#252540");

			context.fillStyle = gradient;
			context.beginPath();
			context.arc(0, canvasHeight, canvasWidth*1.42, 0, Math.PI * 2, true);
			context.fill();


			// Stars.
			// We randomly place a number of stars using shadows as a highlight.
			context.fillStyle = "#dadffa";
			context.shadowOffsetX = 0;
			context.shadowOffsetY = 0;
			context.shadowColor = "#a3ade6";

			for (var i = 0; i < starCount; i++) {
				var radius = storedStars[i].radius;
				
				context.beginPath();
				context.arc(storedStars[i].x, storedStars[i].y, radius, 0, Math.PI * 2, true);
				context.shadowBlur = storedStars[i].bluramount;
				context.fill();
			}
			context.shadowBlur = 0;
		}


		function getFontHeight(name) {
			return (context.measureText(name).actualBoundingBoxAscent -...