JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.js"></script>

CSS

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

body {
  margin: 0px;
  background-color: #424242;
  overflow: hidden;
}

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

JavaScript

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


  var aspectRatio = (window.innerWidth / window.innerHeight);
  var fieldOfView = 50;
  var nearPlane = 1;
  var farPlane = 5000;


init();
animate();

function init() {

  /* -- Create Scene -- */
  scene = new THREE.Scene();
  scene.name = 'Scene';
  window.scene = scene;
  
  
  camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane);
  camera.position.y = 150;
  camera.rotation.x = -(Math.PI / 2);



  /* -- Create Renderer -- */
  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  /* this is what i tried so far but does not bring the right effect */
  
  // renderer.setPixelRatio(window.devicePixelRatio);
  // renderer.setPixelRatio(2);

  // renderer.shadowMapType = THREE.PCFSoftShadowMap;

  // let pixelRatio = window.devicePixelRatio || 0;
  // this.renderer.setSize(width, height);
  // this.composer.setSize(width * pixelRatio, height * pixelRatio);

  // var w = 375;
  // var h = 667;
  //
  //
  //
  // renderer.domElement.style.width = w;
  // renderer.domElement.style.height = h;
  // renderer.domElement.width = w * 2;
  // renderer.domElement.height = h * 2;
  //
  // renderer.setSize(window.innerWidth * 2, window.innerHeight * 2, false);

  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);


  canvas = document.getElementsByTagName('canvas')[0];
  window.onresize = resizeCanvas;
  resizeCanvas();

  var cubesArr = [];
  var cubesGridProps = {
    countHorizontal: 5,
    countVertical: 9,
    gap: 15,
    offsetLeft: 30,
    offsetTop: 60
  };
  var material;


  /* -- For Click/Touch Events -- */
  var raycaster = new THREE.Raycaster();
  var mouse = new THREE.Vector2();


  /* -- #01: Create Cube Map / Grid -- */
  var...