JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

<script type="importmap">
  {
			"imports": {
				"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
				"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
			}
		}
	</script>

<script type="module" src="scripts/main.js"></script>

CSS

body {
  margin: 0;
}

#container {
  background-color: #000;
}

JavaScript

import * as THREE from 'three';
import {
  GUI
} from 'three/addons/libs/lil-gui.module.min.js';
import {
  OrbitControls
} from 'three/addons/controls/OrbitControls.js';

const data = {
  color: 0x33aa33
};

const container = document.getElementById('container');

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);

const renderer = new THREE.WebGLRenderer({
  antialias: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
  color: data.color
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const gui = new GUI();

gui.addColor(data, 'color').onChange(() => {

  material.color.set(data.color);

});

window.addEventListener('resize', () => {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);

});

renderer.setAnimationLoop(() => {

  mesh.rotation.x += 0.005;
  mesh.rotation.y += 0.01;

  controls.update();

  renderer.render(scene, camera);

});