JSFiddle - React, Tailwind, and code Playground

HTML

<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
		<script>
			

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.physicallyCorrectLights = true;
      document.body.appendChild( renderer.domElement );
      
      
      var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
      var controls = new THREE.OrbitControls( camera, renderer.domElement );
      
      camera.position.set( 15, 25, 45 );
      controls.target.set( 0, 0, 0 );
      
     	var geometry = new THREE.BufferGeometry();
      var indices = [];
      var vertices = [];
      var normals = [];
      var size = 12;
      var segments = 10;
      var halfSize = size / 2;
      var segmentSize = size / segments;
      // generate vertices, normals and color data for a simple grid geometry
      for ( var i = 0; i <= segments; i ++ ) {
        var y = ( i * segmentSize ) - halfSize;
        for ( var j = 0; j <= segments; j ++ ) {
          var x = ( j * segmentSize ) - halfSize;
          vertices.push( x, - y, 0 );
          normals.push( 0, 0, 1 );
        }
      }
      // generate indices (data for element array buffer)
      for ( var i = 0; i < segments; i ++ ) {
        for ( var j = 0; j < segments; j ++ ) {
          var a = i * ( segments + 1 ) + ( j + 1 );
          var b = i * ( segments + 1 ) + j;
          var c = ( i + 1 ) * ( segments + 1 ) + j;
          var d = ( i + 1 ) * ( segments + 1 ) + ( j + 1 );
          // generate two faces (triangles) per iteration
          indices.push( a, b, d ); // face one
          indices.push( b, c, d ); // face two
        }
      }
      //
     ...