JSFiddle - React, Tailwind, and code Playground

CSS

body {
	  margin: 0;
}

JavaScript

import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';

import { EffectComposer } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/ShaderPass.js';

import { HorizontalBlurShader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/shaders/HorizontalBlurShader.js';
import { VerticalBlurShader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/shaders/VerticalBlurShader.js'

let camera, scene, composer;

let mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    const material = new THREE.MeshNormalMaterial();

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

    const renderer = new THREE.WebGLRenderer();
		renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
		
		// postprocessing

		composer = new EffectComposer( renderer );
		composer.addPass( new RenderPass( scene, camera ) );

		const hblur = new ShaderPass( HorizontalBlurShader );
		hblur.uniforms.h.value = 1 / window.innerWidth;
		composer.addPass( hblur );

		const vblur = new ShaderPass( VerticalBlurShader );
		vblur.uniforms.v.value = 1 / window.innerWidth;
		composer.addPass( vblur );

}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    composer.render();

}