JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title>Babylon lots of cubes</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #000;
            color: #fff;
            margin: 0px;
            overflow: hidden;
        }

        #mycanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
<div id="container">
    <canvas id="mycanvas"></canvas>
</div>

<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

<script>
    var container, stats;
    container = document.getElementById("container");
    stats = new Stats();
    container.appendChild(stats.dom);

    var canvas = document.getElementById('mycanvas');
    var engine = new BABYLON.Engine(canvas, true);

    var scene = new BABYLON.Scene();
    scene.clearColor = new BABYLON.Color3(0, 0, 0);
    var gridSize = 20;

    var camera = new BABYLON.ArcRotateCamera('camera', 0, 0, gridSize * 1.5, new BABYLON.Vector3(0, 0, 0), scene);
    camera.fov = 60 / 180 * Math.PI;
    camera.minZ = 0.01;
    camera.maxZ = 1e10;
    camera.setPosition(new BABYLON.Vector3(0, 0, -gridSize * 1.5));
    camera.attachControl(canvas, true);

    var light1 = new BABYLON.DirectionalLight('light1', new BABYLON.Vector3(1, 2, 3), scene);
    light1.intensity = 0.8;

    var light2 = new BABYLON.HemisphericLight('light2', new BABYLON.Vector3(0, 1, 0), scene);
    light2.diffuse = new BABYLON.Color3(0.25, 0.25, 0.25);

    var boxGeometry = new BABYLON.BoxGeometry('box', scene, 0.8, true);
    boxGeometry.regenerate();

    var material = new BABYLON.StandardMaterial('mat', scene);
    material.diffuseColor = new BABYLON.Color3(0.9, 0.9, 0.9);
    material.specularColor = new BABYLON.Color3(0., 0., 0.);

		var mesh =...