JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;
var dirLight;

init();
animate();

function init() {
  initScene();
  initMisc();
}

function initScene() {
  camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.set(0, 15, 35);
  camera.up.set(0, 0, 1);

  scene = new THREE.Scene();

  // Lights

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

  dirLight = new THREE.DirectionalLight(0xffffff, 1);
  dirLight.name = "Dir. Light";
  dirLight.position.set(30, 30, 50);
  dirLight.castShadow = true;
  dirLight.shadow.camera.up.set(0, 0, 1);
  dirLight.shadow.camera.near = 1;
  dirLight.shadow.camera.far = 500;
  dirLight.shadow.camera.right = 100;
  dirLight.shadow.camera.left = -100;
  dirLight.shadow.camera.top = 100;
  dirLight.shadow.camera.bottom = -100;
  dirLight.shadow.mapSize.width = 1024;
  dirLight.shadow.mapSize.height = 1024;
  scene.add(dirLight);

  scene.add(new THREE.CameraHelper(dirLight.shadow.camera));

  // Mesh
  let boxGeometry = new THREE.BoxBufferGeometry(50, 50, 5);
  let boxGeometry1 = new THREE.BoxBufferGeometry(5, 5, 1);
  let mesh = new THREE.Mesh(
    boxGeometry,
    new THREE.MeshPhongMaterial({
      color: new THREE.Color(0.7, 0.7, 0.7)
    })
  );
  mesh.castShadow = true;
  mesh.receiveShadow = true;
  scene.add(mesh);

  let mesh3 = new THREE.Mesh(
    boxGeometry1,
    new THREE.MeshPhongMaterial({
      color: new THREE.Color(0, 0, 1)
    })
  );
  mesh3.position.set(0, 0, 15);
  mesh3.updateWorldMatrix();
  mesh3.castShadow = true;
  mesh3.receiveShadow = true;
  scene.add(mesh3);

  let mesh4 = new THREE.Mesh(
    new THREE.BoxBufferGeometry(1, 1, 50),
    new THREE.MeshPhongMaterial({
      color: new THREE.Color(1, 1, 0)
    })
  );
  mesh4.position.set(-10, -10, 0);
  mesh4.updateWorldMatrix();
  mesh4.castShadow = true;
  mesh4.receiveShadow = true;
  scene.add(mesh4);
}

function initMisc() {
  renderer = new THREE.WebGLRenderer({
    antialias: true,
   ...