JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/mrdoob/three.js/raw/master/build/Three.js"></script>
<script src="https://github.com/mrdoob/three.js/raw/master/examples/js/RequestAnimationFrame.js"></script>
<script src="https://github.com/mrdoob/three.js/raw/master/examples/js/Stats.js"></script>
<script src="https://github.com/mrdoob/three.js/raw/master/examples/js/Detector.js"></script>
<script src="https://github.com/mrdoob/three.js/raw/master/examples/fonts/helvetiker_bold.typeface.js"></script>

CSS

body {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

JavaScript

// Shared objects we'll instantiate later.
var container, camera, scene, renderer, origin = new THREE.Vector3(0,0,0);
var intensity = 0xffffff;
var t = 0;

// Initialise
init();

// Then animate the scene.
animate();

function init() {
    // Create a new scene
    scene = new THREE.Scene();

    // Create a new camera, don't worry about the details of this for now.
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    // Move the camera  
    camera.position.set(300, 300, 800);
    // Point the camera towards the origin
    camera.lookAt(origin);
    // Add the camera to the scene
    scene.add(camera);

    // Create a new directional light, full intensity
    // Try setting it to 0x888888 and see what happens!
    light = new THREE.DirectionalLight(intensity);
    // Light toward the origin
    light.position.set(0, 1, 1).normalize();
    // Add the light to the scene, try removing it!
    scene.add(light);
    
    // We'll add a pointlight that's going to be moved around
    // every frame.  Let's use a yellowey colour.
    light = new THREE.PointLight(0x886600);
    light.position.set(0, 100, 100);
    scene.add(light);
    
    // Create a new text geometry object
    var geometry = new THREE.TextGeometry(
        "@nrocy", {
            // size of the text
            size: 200,
            // depth of the text
            height: 50,
            // controls the 'blockiness' of the curves
            curveSegments: 4,
            
            font: "helvetiker",
            weight: "bold",
            style: "normal"
        }
    );
    
    var material = new THREE.MeshLambertMaterial({color: 0xffffff});
    
    // Create the mesh from the geometry and material
    text = new THREE.Mesh(geometry, material);
    // move the text toward the centre
    text.position.x = -550;
    
    // Add the text to the scene
    scene.add(text);

    // Create a new WebGL renderer
    renderer = new...