JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>

<div class="wrapper" id="wrapper">
     <h1 id="title">TrivaTune </h1>
     <h2 id="subtitle">ALPHA</h2>

    <svg height="320" width="400" class="logo-triangle">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="100%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:rgb(50,50,50);stop-opacity:1" />
                <stop offset="100%" style="stop-color:black;stop-opacity:1" />
            </linearGradient>
        </defs>
        <filter id="dropshadow" height="130%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
            <feOffset dx="2" dy="2" result="offsetblur" />
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
        <polygon points="0,0 400,0 200,300" stroke="#36e2f8" stroke-width="3" />
    </svg>
</div>

<script id="vertexShader" type="x-shader/x-vertex">

// Uniforms
uniform float time;
varying vec3 vNormal;
      
void main(void) {
   vec3 v = position;
   vNormal = normal;
   v.z += sin(2.0 * position.x + (time)) * 925.5;
	
   gl_Position = projectionMatrix *
                modelViewMatrix *
                vec4(v, 0.9);
}

		</script>


		<script id="fragmentShader" type="x-shader/x-fragment">
varying vec3 vNormal;
uniform float time;
      
void main(void) {
    vec3 light = vec3(0.3, .9, .1);

    light = normalize(light);

    float dProd = max(0.2, dot(vNormal, light));

    gl_FragColor = vec4(0, // R
                      84, // G
                      25, // B
                      1.0);  // A
}

		</script>

CSS

#wrapper {
  height:550px;
  min-height:100%;/*for mozilla*/
  background-color: #000000;
  margin: 0px;
  overflow: hidden;
  background-image: radial-gradient(ellipse farthest-corner at center top, #23233f 0%, #000000 60%);
  background-image: url(http://1nova.com/wallpapers/wp-content/uploads/sites/34/2015/02/Retro-80s-Arcade-Game.jpg);
    background-size: cover;
  background-position: top center;
}

#title {
  color: #C6CBF5;
  font-family: 'Orbitron', sans-serif;
  font-size: 120px;
  font-weight: 1000;
  line-height: 1.2;
  left: 50%;
  margin: 0;
  margin-left: -420px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 80px;
  width: 852px;
  z-index: 11;
  background: -webkit-linear-gradient(top, #151C60, #C6CBF5 40%, black 40%, #E1A0CE 65%, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
}

#subtitle {
  color: #d100b1;
  display: block;
  font-family: 'Yellowtail', cursive;
  font-size: 150px;
  margin-right: -8em;
  position: absolute;
  text-shadow: 0 0 1px #d100b1, 0 -3px 3px rgba(255, 255, 255, 0.8), 0 3px 3px rgba(0, 0, 0, 0.5), 0 0 15px #d100b1, 0 0 45px rgba(209, 0, 177, 0.8);
  text-align: center;
  text-decoration: underline;
  text-transform: none;
  -webkit-transform: skew(-10deg) rotate(-10deg);
  -ms-transform: skew(-10deg) rotate(-10deg);
  transform: skew(-10deg) rotate(-10deg);
  top: 20px;
  width: 100%;
  z-index: 11;
}

.logo-triangle {
  -webkit-animation: dash 6s linear forwards;
  animation: dash 6s linear forwards;
  fill: url(#grad1);
  -webkit-filter: url(#dropshadow);
  filter: url(#dropshadow);
  left: 50%;
  margin-left: -200px;
  position: absolute;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  top: 6em;
  z-index: 8;
}

@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

JavaScript

jQuery(function($) {

    $(document).ready(function() {
    
        var vertexHeight = 15000;
        var planeDefinition = 100;
        var planeSize = 1245000;
        var totalObjects = 50000;
        var frame = 60;

        var container = document.createElement('div');
        document.getElementById("wrapper").appendChild(container);

        var camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 1, 400000)
        camera.position.z = 50000;
        camera.position.y = 15000;
        camera.lookAt(new THREE.Vector3(0, 15900, 0));

        var scene = new THREE.Scene();
        scene.fog = new THREE.Fog(0x23233f, 1, 300000);

        var uniforms = {
            time: {
                type: "f",
                value: 0.0
            }
        };

        var material = new THREE.ShaderMaterial({
            uniforms: uniforms,
            vertexShader: document.getElementById('vertexShader').textContent,
            fragmentShader: document.getElementById('fragmentShader').textContent,
            wireframe: true,
            fog: true
        });

        var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeSize, planeSize, planeDefinition, planeDefinition), material);
        plane.rotation.x -= Math.PI * .50;

        scene.add(plane);

        var geometry = new THREE.Geometry();

        for (i = 0; i < totalObjects; i++) {
            var vertex = new THREE.Vector3();
            vertex.x = Math.random() * planeSize - (planeSize * .5);
            vertex.y = (Math.random() * 100000) + 10000;
            vertex.z = Math.random() * planeSize - (planeSize * .5);
            geometry.vertices.push(vertex);
        }

        var material = new THREE.ParticleBasicMaterial({
            size: 400
        });
        var particles = new THREE.ParticleSystem(geometry, material);

        scene.add(particles);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,...