JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>
        <div id="c-left">
            <h3>Renderer</h3>
            <button id="drawing-mode" class="btn btn-info">Enter drawing mode</button>
            <div id="renderer"></div>
        </div>

<div class ="space">

</div>
        <div id="c-right">
            <h3>Canvas</h3>
            <canvas id="canvas" width="512" height="512"></canvas>
        </div>

CSS

html, body {
                width: 100%;
                height: 100%;
            }

            body {
                background: #FFF7F4;
            }

            #c-left, #c-right {
                position: relative;
                display: inline-block;
                height: 100%;
                width: 50%;
            }

            #c-right {
                float: right;
            }

            #renderer {
                position: relative;
                height: 512px;
                width: 512px;
            }
            .space
            {
              postition: relative;
              display: inline-block;
              width: 100%;
              height 300px;
            }

JavaScript

/**
 * Fabric.js
 */

var canvas = new fabric.Canvas("canvas");
canvas.backgroundColor = "#FFBE9F";
canvas.freeDrawingBrush = new fabric['PencilBrush'](canvas);
canvas.isDrawingMode = false;

var rectangle = new fabric.Rect({
  top: 100,
  left: 100,
  fill: "#FF6E27",
  width: 100,
  height: 100,
  transparentCorners: false,
  centeredScaling: true,
});

canvas.add(rectangle);

/**
 * Threejs
 */

var containerHeight = "512";
var containerWidth = "512";
var camera, renderer, container, scene, texture, material, geometry, cube;

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var onClickPosition = new THREE.Vector2();

init();
animate();

/**
 * Configurator init function
 */

var drawingModeEl = document.getElementById('drawing-mode');
drawingModeEl.onclick = function() {
    canvas.isDrawingMode = !canvas.isDrawingMode;
    if (canvas.isDrawingMode) {
      drawingModeEl.innerHTML = 'Cancel drawing mode';
    }
    else {
      drawingModeEl.innerHTML = 'Enter drawing mode';
    }
};
  
function init() {
  /**
   * Camera
   */

  camera = new THREE.PerspectiveCamera(
    30,
    window.innerWidth / window.innerHeight,
    0.01,
    100
  );
  camera.position.set(0, 0, 3.5);

  /**
   * Renderer
   */

  container = document.getElementById("renderer");
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(containerWidth, containerHeight);
  camera.aspect = container.clientWidth / container.clientHeight;
  camera.updateProjectionMatrix();
  container.appendChild(renderer.domElement);

  /**
   * Scene
   */

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x000000);

  /**
   * Texture and material
   */

  texture = new THREE.Texture(document.getElementById("canvas"));
  texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

  material = new THREE.MeshBasicMaterial({ map: texture });

  /**
   * Model
   */

  geometry = new...