JSFiddle - React, Tailwind, and code Playground

HTML

<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
		<script>
			

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.shadowMap.enabled = true;
			renderer.shadowMap.type = THREE.PCFShadowMap;
      renderer.physicallyCorrectLights = true;
      
      document.body.appendChild( renderer.domElement );
      
      
      var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
      var controls = new THREE.OrbitControls( camera, renderer.domElement );
      
      camera.position.set( 15, 25, 45 );
      controls.target.set( 0, 0, 0 );
      
      
			var geometry = new THREE.PlaneBufferGeometry( 12, 12 );
			var material = new THREE.MeshStandardMaterial( { color: 0x32acd7, side: THREE.DoubleSide } );
			var plane = new THREE.Mesh( geometry, material );
      plane.position.set( 0, 6, 0 );
      plane.castShadow = true;
      plane.receiveShadow = false;
			scene.add( plane );
      
      
      material = new THREE.MeshStandardMaterial( { color: 0xacacac, side: THREE.FrontSide } );
      var floor = new THREE.Mesh( geometry, material );
      floor.scale.x = 20;
      floor.scale.y = 60;
      floor.rotation.x = -Math.PI / 2;
      floor.receiveShadow = true;
      scene.add( floor );
      
      var ambient = new THREE.AmbientLight( 0xffffff, 1.6 );
      scene.add( ambient );
      
      var spotLight = new THREE.SpotLight( 0xac8c6c, 90.4);
      spotLight.position.set( -10, 18, 30 );
      spotLight.castShadow = true;
      spotLight.shadow.bias = 0.0001;
      spotLight.shadow.mapSize.width = 1024;
      spotLight.shadow.mapSize.height = 1024;
     ...