JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/SAOPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/SAOShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/DepthLimitedBlurShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/UnpackDepthRGBAShader.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;
var geometry, material, mesh;
var effectComposer, ssaoPass, renderPass, saoPass, fxaaPass, ShaderPass

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();
		
    // Normally models are loaded and placed to form a dynamic shelf
    geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
		
    // Renderer (Also tried physicallyCorrectLight)
    renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.toneMappingExposure = 1;
    renderer.toneMapping = THREE.Uncharted2ToneMapping;
    renderer.gammaOutput = true;
    renderer.gammaInput = true;
    renderer.gammaFactor = 2.2;
    document.body.appendChild( renderer.domElement );

		// Light
    hemisphereLight = new THREE.HemisphereLight(0xFFFFFF, 0xDDDDDD, .44);
    hemisphereLight.position.set( 10, 0, 10 );

    scene.add(hemisphereLight);
    
    pointLight = new THREE.PointLight(0xffffff, .62);
    pointLight.name = 'pointlight';
    pointLight.position.x = 5;
    pointLight.position.y = 5.8;
    pointLight.position.z = 5;
    pointLight.lookAt(new THREE.Vector3(0,0,0));

    pointLight.shadow.mapSize.width = 2048;
    pointLight.shadow.mapSize.height = 2048;
    pointLight.shadow.camera.near = 1;
    pointLight.shadow.camera.far = 50;
    pointLight.castShadow = false;

    scene.add(pointLight);


    shadowLight = new THREE.PointLight(0xffffff, .2);
    shadowLight.name = 'shadowlight';
    shadowLight.position.x = 3;
    shadowLight.position.y = 5.8;
    shadowLight.position.z = 5;
   ...