JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/38807507/background.jpg"></script>
<body style="margin: 0">
		<div id="container"> </div>
	</body>

CSS

#container { 
    height: 600px;
    background: url('https://dl.dropboxusercontent.com/u/38807507/background.jpg'); 
    }

JavaScript

// set the scene size
var WIDTH = $(document.body).width();
var HEIGHT = $(document.body).height();

// set some camera attributes
var VIEW_ANGLE = 45;
var ASPECT = WIDTH / HEIGHT;
var NEAR = 0.1;
var FAR = 10000;

var $container = $('#container');

 //create camera and a scene
var camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
var scene = new THREE.Scene();

// the camera starts at 0,0,0 so pull it back
camera.position.z = 350;

// create and start the WebGL renderer
var renderer = new THREE.WebGLRenderer( { alpha: true } ); // CHANGED
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor( 0x000000, 0 ); // CHANGED

// attach the render-supplied DOM element
$container.append(renderer.domElement);

//create a square
var length = 50;

var square = new THREE.Shape();
square.moveTo(0, 0);
square.lineTo(0, length);
square.lineTo(length, length);
square.lineTo(length, 0);
square.lineTo(0, 0);

var geometry = new THREE.ShapeGeometry(square);
var material = new THREE.MeshBasicMaterial({ 
    color: 'rgb(59, 89, 152)',
    opacity: 1,
    transparent: true
});

var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = 50;
mesh.position.y = 50;
scene.add(mesh);

// and the camera
scene.add(camera);

renderer.render( scene, camera );