JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/renderers/CSS3DRenderer.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

CSS

body {
  font-family: Monospace;
  background-color: #000;
  color: #000;
  margin: 0px;
  overflow: hidden;
}

JavaScript

var MapElement = function ( id, x, y, z, rx ) {
				var div = document.createElement( 'div' );
				div.id = id;
				div.style.width = '1200px';
				div.style.height = '950px';
				div.style.backgroundColor = 'red';


				var object = new THREE.CSS3DObject( div );
				object.position.set( x, y, z );
				object.rotation.x = rx;
				return object;
			};



			var container, stats;
			var camera, scene, renderer, renderer1, controls;

			var sphere;
			var object;

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				// scene

				scene = new THREE.Scene();

				// camera

				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.set( -1630.5660632506256, 338.2706222303878, -692.3346730528838);

				group = new THREE.Group();

				// lights

				var light, materials;

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

				light = new THREE.DirectionalLight( 0xdfebff, 1 );
				light.position.set( 50, 200, 100 );
				light.position.multiplyScalar( 1.3 );

				light.castShadow = true;

				light.shadow.mapSize.width = 1024;
				light.shadow.mapSize.height = 1024;

				var d = 300;

				light.shadow.camera.left = - d;
				light.shadow.camera.right = d;
				light.shadow.camera.top = d;
				light.shadow.camera.bottom = - d;

				light.shadow.camera.far = 1000;

				scene.add( light );

				// sphere

				var ballGeo = new THREE.SphereBufferGeometry( 100, 32, 16 );
				var ballMaterial = new THREE.MeshLambertMaterial();

				sphere = new THREE.Mesh( ballGeo, ballMaterial );
				sphere.castShadow = true;
				sphere.receiveShadow = true;
				sphere.position.copy( new THREE.Vector3( 0, - 45, 0 ) );
				scene.add( sphere );
				

				var mapObject = new MapElement( 'googleMap', 0, 0, 240, 270 );
				group.add( mapObject );
				group.position.y = -459;
				
				group.rotation.x = 1.3819063267948963; // - Math.PI /...