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;
			}

			#info {
				top: 0px;
				width: 100%;
				color: #000000;
				margin: 6px 0px;
				text-align: center;
			}

			#info a {
				color: #000000;
			}

			#container {
				width: 100%;
				height: calc(100% - 80px);
			}
			.selectBox {
				border: 1px solid #55aaff;
				background-color: rgba(75, 160, 255, 0.3);
				position: fixed;
			}
		</style>
		</style>
	</head>

	<body>

		<div id="container"></div>
		<div id="info">
		<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 id="vertexShader1" type="x-shader/x-vertex">
			precision highp float;
			float EPSILON = 0.3421;
			in float visible;
			in float selected;
			in float pickable;
			in float pn_UUID;
			in vec4 lodInfo;
			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;
			};
			//uniform mat4 modelMatrix;
			//uniform mat3 normalMatrix;
			
			out vec3 vPositionEye;
			out vec3 vNormalEye;
			out vec4 vColor;
			
			out float vFragDepth;       
			uniform float logDepthBufFC;
			out float...