JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

var mesh, renderer, scene, camera, controls;
var parent, object;

init();
animate();

function init() {

	// info
	var info = document.createElement( 'div' );
	info.style.position = 'absolute';
	info.style.top = '30px';
	info.style.width = '100%';
	info.style.textAlign = 'center';
	info.style.color = '#fff';
	info.style.fontWeight = 'bold';
	info.style.backgroundColor = 'transparent';
	info.style.zIndex = '1';
	info.style.fontFamily = 'Monospace';
	info.innerHTML = 'CLICK to toggle colorWrite effect';
	document.body.appendChild( info );

// renderer
	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setClearColor( 0x000000, 0.0 );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	// scene
	scene = new THREE.Scene();
	
	// camera
	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.set( 10, 15, 20 );
	scene.add( camera );

	// controls
	controls = new THREE.OrbitControls( camera, renderer.domElement );
	//controls.addEventListener( 'change', render ); // use if there is no animation loop
	controls.minDistance = 10;
	controls.maxDistance = 50;
	controls.enableDamping = true;

	// ambient
	scene.add( new THREE.AmbientLight( 0xffffff, 0.3 ) );
	
	// light
	var light = new THREE.PointLight( 0xffffff, 1 );
	camera.add( light );

	// mesh
	var geometry = new THREE.BoxGeometry( 1, 16, 1 );
	mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { color: 0xffffff } ) );
	scene.add( mesh );

	// geometry
	var geometry = new THREE.BoxGeometry( 10, 10, 10 );

	// object
	object = new THREE.Group();
	object.position.set( 0, 0, 0 );

	// material
	var material = new THREE.MeshStandardMaterial( {
		color: 0xffffff, 
		roughness: 1,
		metalness: 0,
		opacity: 0.7,
		transparent: true
	} );

	for (var i = 0; i < 20; i++ ) {

		var material = material.clone();
		material.color.setHSL( Math.random(), 1,...