JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
	<head><base href="./three.js/examples/" target="_blank">
		<title>three.js webgl - scene animation</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			html, body {
				height: 100%;
			}

			body {
				background: #ffffff;
				padding: 0;
				margin: 0;
				font-family: Monospace;
				font-size: 13px;
				overflow: hidden;
			}

			#container {
				width: 100%;
				height: calc(100% - 80px);
			}
		</style>
		</style>
	</head>

	<body>

		<div id="container"></div>
		<script type="text/javascript" src="https://yume.human-interactive.org/examples/ubo/three.js"></script> 
		<!--<script type="text/javascript" src="/libs/three_v101.js"></script>-->
		<script type="text/javascript" src="https://threejs.org/examples/js/utils/SceneUtils.js"></script>
		<script type="text/javascript" src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
    <script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>

		<script id="vertexShader1" type="x-shader/x-vertex">		
			precision highp float;
			in vec3 mcol0;
			in vec3 mcol1;
			in vec3 mcol2;
			in vec3 mcol3;
			in vec3 nmcol0;
			in vec3 nmcol1;
			in vec3 nmcol2;
			in vec3 position;
			in vec3 normal;
			in vec4 color;
			uniform ViewData {
				mat4 projectionMatrix;
				mat4 viewMatrix;
			};			
			out vec3 vPositionEye;
			out vec3 vNormalEye;
			out vec4 vColor;
			
			void main() {
				mat3 normalMatrix = mat3(
					vec3( nmcol0 ),
					vec3( nmcol1 ),
					vec3( nmcol2 )
				);
				
				mat4 matrix = mat4(
						vec4( mcol0, 0 ),
						vec4( mcol1, 0 ),
						vec4( mcol2, 0 ),
						vec4( mcol3, 1 )
					);
				vec4 tposition = matrix * vec4( position, 1.0 );
				vec4 vertexPositionEye = viewMatrix * tposition;
				vPositionEye = vertexPositionEye.xyz;
				vNormalEye =  normalMatrix * normal;
				gl_Position = projectionMatrix *...