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);

scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);

camera.position.z = 200;
camera.position.y = 200;
camera.lookAt({
    x: 0,
    y: 0,
    z: 0
});
scene.add(camera);

cube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50), new THREE.MeshLambertMaterial({
    color: 0xCC0000
}));
cube.position = {
    x: -50,
    y: 15,
    z: 50
};
scene.add(cube);

cube2 = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50), new THREE.MeshLambertMaterial({
    color: 0xCC0000
}));
cube2.position = {
    x: 50,
    y: 15,
    z: -50
};
scene.add(cube2);

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

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

var light = new THREE.SpotLight(0xffffff, 1);
light.position.set(-100, 50, -100);
scene.add(light);

renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = false;
light.castShadow = true;

cube.castShadow = true;
cube.receiveShadow = true;
cube2.castShadow = true;
cube2.receiveShadow = true;
plane.castShadow = true;
plane.receiveShadow = true;

light.target.position.set(50, 0, -50);

renderer.render(scene, camera);