JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
camera.position.set(13, 25, 38);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
var canvas = renderer.domElement
document.body.appendChild(canvas);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var geometry = new THREE.PlaneBufferGeometry( 80, 40 );
geometry.computeBoundingBox();
var material = new THREE.ShaderMaterial({
  uniforms: {
    color1: {
      value: new THREE.Color("rgba(255, 0, 0, 1)")
    },
    color2: {
      value: new THREE.Color("rgba(0,0,255, 1)")
    },
    bboxMin: {
      value: geometry.boundingBox.min
    },
    bboxMax: {
      value: geometry.boundingBox.max
    },
    edgeOffset: {
      value: 10.0
    }
  },
  vertexShader: `
    uniform vec3 bboxMin;
    uniform vec3 bboxMax;
    uniform float edgeOffset;
  
    varying vec2 vUv;
    varying float aspect;
    varying vec2 edgeAspect;
    varying vec2 dimensionAspect;

    void main() {
      vUv.x = (position.x - bboxMin.x) / (bboxMax.x - bboxMin.x);
      vUv.y = (position.y - bboxMin.y) / (bboxMax.y - bboxMin.y);
      edgeAspect.y = edgeOffset / (bboxMax.y - bboxMin.y);
      edgeAspect.x = edgeOffset / (bboxMax.x - bboxMin.x);
			gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
  `,
  fragmentShader: `
  	uniform vec3 color1;
    uniform vec3 color2;
  
    varying vec2 vUv;
    varying vec2 edgeAspect;
    
    void main() {
      
      vec2 distFromCenter = abs(0.5-vUv);
      vec2 gradientEdgeFromCenter = 0.5-edgeAspect;
      vec2 centerEdgeDiff = distFromCenter-gradientEdgeFromCenter;
      float gradient = length(max((centerEdgeDiff/edgeAspect),0.));
      gl_FragColor = vec4(mix(color1, color2, gradient), 0.1);
    }
  `,
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);



render();

function resize(renderer) {
  const canvas = renderer.domElement;
  const width =...