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>
<div id="container"></div>
<div id="info">
  <a href="http://threejs.org" target="_blank">three.js</a> - orbit controls example
</div>

CSS

body {
  color: #000;
  font-family:Monospace;
  font-size:13px;
  text-align:center;
  font-weight: bold;
  background-color: #fff;
  margin: 0px;
  overflow: hidden;
}
#info {
  color:#000;
  position: absolute;
  top: 0px; width: 100%;
  padding: 5px;
}
a {
  color: red;
}

JavaScript

var camera, controls, scene, renderer;

init();
animate();

function init() {
  scene = new THREE.Scene();
  scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
  
  renderer = new THREE.WebGLRenderer();
  renderer.setClearColor( scene.fog.color );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  
  grid = new THREE.GridHelper(100, 10);
  grid.setColors(0xff0000, 0xffffff);
  scene.add(grid);
  axis = new THREE.AxisHelper(1200);
  scene.add(axis);

  var container = document.getElementById( 'container' );
  container.appendChild( renderer.domElement );
  
  camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 500, 1000 );
  camera.position.x = 200;
  camera.position.y = 100;
  camera.position.z = 200;

  controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.enableDamping = true;
  controls.dampingFactor = 0.25;
  
  // lights
  light = new THREE.DirectionalLight( 0xffffff );
  light.position.set( 1, 1, 1 );
  scene.add( light );
  light = new THREE.DirectionalLight( 0x002288 );
  light.position.set( -1, -1, -1 );
  scene.add( light );
  light = new THREE.AmbientLight( 0x222222 );
  scene.add( light );
  
  var geometry = new THREE.BoxGeometry( 20, 20, 20 );
  for ( var i = 0; i < geometry.faces.length; i += 2 ) {
    var hex = Math.random() * 0xffffff;
    geometry.faces[ i ].color.setHex( hex );
    geometry.faces[ i + 1 ].color.setHex( hex );
  }
  var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );
  cube = new THREE.Mesh( geometry, material );
  cube.position.x = 65;
  cube.position.y = 10;
  cube.position.z = 25;
  scene.add( cube );

  window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(...