JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <body></body>

</html>

CSS

html {
    overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var geometry, material, mesh;

init();

function init() {

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(3, -3, 20);
    camera.lookAt(new THREE.Vector3());

    scene = new THREE.Scene();

    geometry = new THREE.PlaneGeometry(30, 30, 1, 1);
    material = new THREE.ShaderMaterial({
        vertexShader: ['varying vec3 vPosition;',
            'void main() {',
            'vPosition = position;',
            'gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);',
            '}'].join('\n'),
        fragmentShader: ['varying vec3 vPosition;',
            'void main() {',
            'vec3 gridPosition = mod(vPosition, 1.0);',
            'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);',
            'if(gridPosition.x < 0.05 || gridPosition.y < 0.05) {',
            'gl_FragColor.w = 1.0;',
            '}',
            '}'].join('\n')
    });

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

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    renderer.render(scene, camera);
}