JSFiddle - React, Tailwind, and code Playground

HTML

<div id="viewport"></div>

CSS

body{
            color: grey;
            margin: 0px 0px;
            padding: 0px 0px;
            }

            #header {
            width: 800px;
            margin: 5px auto;
            }

            .button {
            border: 2px solid lightgrey;
            border-radius: 5px;
            background-color: grey;
            color: white;
            padding: 5px;
            cursor: pointer;
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            }
            .button:hover {
            color: black;
            background-color: darkorange;
            border-color: grey;
            }

            #viewport {
            border: 2px solid grey;
            border-radius: 2px;
            background-color: cornflowerblue;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            padding: 0;
            }

JavaScript

//----Variables----//
            //DOM element to attach the renderer to
            var viewport, controls;
            
            //viewport size
            var viewportWidth = 400;
            var viewportHeight = 400;

            //camera attributes
            var view_angle = 45,
                aspect = viewportWidth / viewportHeight,
                near = 0.1,//near clip-plane
                far = 10000;//far clip-plane

            //sphere specifications
            var radius = 50, segments = 32, rings = 32;

            //sphere material
            var sphereMaterial = new THREE.MeshLambertMaterial(
            {
                color: 0xCC0000
            });

        //----Constructors----//
            var renderer = new THREE.WebGLRenderer({antialias: true});
            var scene = new THREE.Scene();

            var camera = new THREE.PerspectiveCamera(
            view_angle,
            aspect,
            near,
            far
            );

            //constructs and empty object and attach controls to it
            var dummy = new THREE.Object3D();

            //constructs an instance of a white light
            var pointLight = new THREE.PointLight( 0xFFFFFF );

            //constructs an instance of a sphere
            var sphere = new THREE.Mesh(
                new THREE.SphereGeometry(radius, segments, rings),
                sphereMaterial);

        //----Initialization----//
            function initialize()
            {
                viewport = document.getElementById('viewport');
                //Sets up the renderer to the same size as a DOM element
                //then attaches it to that element
                renderer.setSize(viewportWidth, viewportHeight);
                document.getElementById('viewport').appendChild(renderer.domElement);

                //set position of camera
                camera.position.set(100,0,2000);

                //camera control properties
                controls =...