JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.170.0/three.min.js"></script>
<script type="importmap">
	{
		"imports": {
			"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/"
		}
	}
</script>

CSS

body {
  margin: 0;
  background: linear-gradient( to bottom, pink 0%, pink 40%, paleturquoise 40%, paleturquoise 100% );
}

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 1000 );
camera.position.set( 0, 0, 4);
scene.add(camera);

const renderer = new THREE.WebGLRenderer({alpha: true});
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

const orbitControls = new OrbitControls(camera, renderer.domElement);

const geometry1 = new THREE.PlaneGeometry( 4, 2 );
/* const texture1 = new THREE.TextureLoader().load('https://picsum.photos/id/855/800/400.jpg'); */
const texture1 = new THREE.TextureLoader().load('https://picsum.photos/id/114/800/400.jpg');
const material1 = new THREE.MeshStandardMaterial( {
	map: texture1,
 	color: 0xffffff,
	roughness: 1,
	metalness: 0,
	emissive: 0,
	envMapIntensity: 1,
	blendColor: 0,
	depthWrite: false,
} );
const mesh1 = new THREE.Mesh( geometry1, material1 );
scene.add( mesh1 );

const geometry2 = new THREE.PlaneGeometry( 0.5, 2 );
const texture2 = new THREE.TextureLoader().load('https://picsum.photos/id/992/80/400.jpg?grayscale');
const material2 = new THREE.MeshStandardMaterial({
	map: texture2,
	color: 0xffffff,
	roughness: 0.5,
	metalness: 0.2,
	emissive: 0xff0000,
	envMapIntensity: 1,
	blending: 4,
	opacity: 0.5,
	transparent: true,
	blendColor: 0,
 } );
 
const mesh2 = new THREE.Mesh( geometry2, material2 );
mesh1.add(mesh2);

const ambient = new THREE.AmbientLight( 0x222222, 1 );
scene.add(ambient);

const light = new THREE.DirectionalLight(0xffffff, 6);
light.position.set( 5, 10, 7.5);
scene.add(light);

function animate() {
  renderer.render( scene, camera );
}