JSFiddle - React, Tailwind, and code Playground

HTML

<div class="comets">
		<div class="comet comet-1"></div>
		<div class="comet comet-2"></div>
		<div class="comet comet-3"></div>
		<div class="comet comet-4"></div>
	</div>

	<div class="container">
		<div class="rocket-orbit">
			<div class="rocket">
				<div class="rocket-body">
				    <div class="rocket-body-1"></div>
				    <div class="rocket-body-2"></div>
				    <div class="rocket-nozzle-1"></div>
				    <div class="rocket-nozzle-2"></div>
				</div>
				
				<div class="rocket-wing wing-left"></div>
				<div class="rocket-wing wing-right"></div>
			    
			    <div class="rocket-exhaust"></div>
			    <div class="rock-fire"></div>
			</div>
		</div>

		<div class="astronaut">
			<div class="astronaut-head">
				<div class="astronaut-visor">
					<div class="visor-reflection"></div>
				</div>
			</div>
			<div class="astronaut-body"></div>

			<div class="astronaut-arm-right"></div>
			<div class="astronaut-arm-left"></div>

			<div class="astronaut-leg leg-left"></div>
			<div class="astronaut-leg leg-right"></div>

			<div class="astronaut-flag">
				<div class="flag"></div>
				<div class="flag-cable"></div>
			</div>
		</div>

		<div class="moon">
		    <div class="crater crater1 crater-big"></div>
		    <div class="crater crater2 crater-big"></div>
		    <div class="crater crater3 crater-small"></div>
		    <div class="crater crater4 crater-small"></div>
		    <div class="crater crater5 crater-meddium"></div>
		    <div class="crater crater6 crater-ellipse"></div>
		    <div class="crater-out crater7"></div>
		    <div class="crater crater8 crater-ellipse"></div>
		    <div class="crater crater9 crater-in"></div>
		    <div class="crater-out crater10"></div>
		    <div class="crater crater11 crater-small"></div>
		</div>
	</div>

CSS

body {
			position: relative;
		    background: #000;
		    overflow: hidden;
		    background: 
		    	-webkit-radial-gradient(transparent, #000 95%),
		    	-webkit-radial-gradient(rgba(97, 121, 121, .8) 1px, rgba(97, 121, 121, .2) 1px),
		    	-webkit-radial-gradient(#000, #000);
		    background-size: 
		    	100% 100%,
		    	4px 4px,
		    	100% 100%;
		}

		.container {
			position: relative;
			width: 800px;
			height: auto;
			margin: 19% auto;
		}


		/**
		 * Lua
		 */
		.moon {
		    position: relative;
			width: 420px;
			height: 420px;
			margin: 0 auto;
			background: #b0afa0;
			background: -webkit-radial-gradient(#b0afa0 67%, #0a0d0d 80%);
			background: -moz-radial-gradient(#b0afa0 67%, #0a0d0d 80%);
			background: -o-radial-gradient(#b0afa0 67%, #0a0d0d 80%);
			background: -ms-radial-gradient(#b0afa0 67%, #0a0d0d 80%);
			background: radial-gradient(#b0afa0 67%, #0a0d0d 80%);
			border-radius: 50%;
		}

		.crater-in {
		    width: 22%;
			height: 3%;
			background: #6e716a !important;
			-webkit-box-shadow: 
				inset 0 -10px 8px #0a0d0d;
			box-shadow: 
				inset 0 -10px 8px #0a0d0d;
		}

		.crater-out {
		    position: absolute;
			background: #b0afa0;
			background: -webkit-linear-gradient(#b0afa0 59%, transparent 60%);
			background: -moz-linear-gradient(#b0afa0 59%, transparent 60%);
			background: -o-linear-gradient(#b0afa0 59%, transparent 60%);
			background: -ms-linear-gradient(#b0afa0 59%, transparent 60%);
			background: linear-gradient(#b0afa0 59%, transparent 60%);
			border-radius: 20px 20px 10px 10px;
			width: 14%;
			height: 5%;
		}

		.crater {
		    position: absolute;
			background: #b0afa0;
			border-radius: 50%;
		}

		.crater-small,
		.crater-meddium {
		    background: #eae4c9;
			-webkit-box-shadow: inset 1px 2px 3px #6e716a;
			box-shadow: inset 1px 2px 3px #6e716a;
		}

		.crater-small {
		    width: 5%;
		    height: 4%;
		}

		.crater-meddium {
		    width: 11%;
		    height: 10%;
		}

		.crater-big {
		    width:...