JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>temp example</title>
		<style>
			body { margin: 0; }
		</style>
        <link rel="shortcut icon" href="favicon/favicon.ico">
        <link rel="icon" type="image/gif" href="favicon/animated_favicon1.gif">
        <script
        async
        src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"
        ></script>
      
      <script type="importmap">
        {
          "imports": {
            "three": "https://unpkg.com/three@0.171.0/build/three.module.js",     
            "three/tsl": "https://unpkg.com/three@0.171.0/build/three.webgpu.js",       
            "three/addons/": "https://unpkg.com/three@0.171.0/examples/jsm/"
          }
        }
      </script>
	</head>
	<body>
        <div id="container"></div>
		<script type="module">

            import * as THREE from 'three';

            import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
            import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

            let container, camera, scene, renderer, mesh;

            init();

            function init() {

                container = document.getElementById( 'container' );

                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0x8FBCD4 );

                camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 0.1, 500 );
                camera.position.z = 10;
                scene.add( camera );

                // show axes The X axis is red. The Y axis is green. The Z axis is blue.
                var axesHelper = new THREE.AxesHelper(50);            
                scene.add( axesHelper);

                scene.add( new THREE.AmbientLight( 0x8FBCD4, 1.5 ) );

                const pointLight = new THREE.PointLight( 0xffffff, 200 );
                camera.add( pointLight );

                const geometry = createGeometry();

                const...