JSFiddle - React, Tailwind, and code Playground

CSS

body {
        margin: 0px;
        overflow: hidden;
      }

JavaScript

renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;

scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(100,100,0);
camera.lookAt({x:0,y:0,z:0});
scene.add(camera);

var plane = new THREE.Mesh(new THREE.PlaneGeometry(200,200), new THREE.MeshLambertMaterial({color: 0x22FF11}));
plane.receiveShadow = true;
scene.add(plane);

var cube = new THREE.Mesh(new THREE.CubeGeometry(20,20,20), new THREE.MeshLambertMaterial({color: 0xFF0000}));
cube.position.y = 10;
cube.castShadow = true;
scene.add(cube);

var cube2 = new THREE.Mesh(new THREE.CubeGeometry(12,100,12), new THREE.MeshLambertMaterial({color: 0xFF00FF}));
cube2.position.set(0,50,-50);
cube2.castShadow = true;
scene.add(cube2);

var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(-500, 700, -500);
light.castShadow = true;
scene.add(light);


light.shadowCameraLeft = -120;
light.shadowCameraRight = 120;
light.shadowCameraTop = 120;
light.shadowCameraBottom = -120;
light.shadowBias = 0.001;
        

scene.add( new THREE.AmbientLight( 0x232323 ) );

renderer.render(scene, camera);