JSFiddle - React, Tailwind, and code Playground

HTML

<script type="module">


			import * as THREE from 'https://threejs.org/build/three.module.js';
			import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
			import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
			import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
			import { GUI } from 'https://threejs.org/examples/jsm/libs/dat.gui.module.js';
			import { HorizontalBlurShader } from 'https://threejs.org/examples/jsm/shaders/HorizontalBlurShader.js';
			import { VerticalBlurShader } from 'https://threejs.org/examples/jsm/shaders/VerticalBlurShader.js';



			// import { VerticalBlurShader } from './jsm/shaders/VerticalBlurShader.js';



			let camera, scene, renderer, orbit, stats, gui;

			let composer, SAO;

			let gltfLoader = new GLTFLoader()

			const PLANE_WIDTH = 5;
			const PLANE_HEIGHT = 5;
			const CAMERA_HEIGHT = 3;

			const state = {
				shadow: {
					blur: 3.4,
					darkness: 1,
					opacity: .67,
				},
				plane: {
					color: '#ffffff',
					opacity: 1,
				},
				showWireframe: false,
			};

			const state2 = {
				shadow: {
					blur: 1.4,
					darkness: 1,
					opacity: 1,
				},
				plane: {
					color: '#ffffff',
					opacity: 1,
				},
				showWireframe: false,
			};

			let shadowGroup, renderTarget, renderTargetBlur, shadowCamera, cameraHelper, depthMaterial, horizontalBlurMaterial, verticalBlurMaterial;
			let shadowGroup2, renderTarget2, renderTargetBlur2, shadowCamera2, cameraHelper2, depthMaterial2, horizontalBlurMaterial2, verticalBlurMaterial2;

			let plane, blurPlane, fillPlane;
			let plane2, blurPlane2, fillPlane2;

			init();
			animate();

			function init() {

				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 20 );
				camera.position.set( 0, 7, 10 );

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




				//

				renderer = new THREE.WebGLRenderer( {...