JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.ships2career.com/library/pixi.js"></script>
<div id="one"></div>
<div id="two"></div>

CSS

#one {position: absolute; border: 1px solid black; left: 0px; width: 300px; height: 200px; }
#two {position: absolute; border: 1px solid red; left: 200px; width: 100px; height: 200px;}

JavaScript

var renderer1  = PIXI.autoDetectRenderer(300, 200, { transparent: true, antialias: true });
			var pixiStage1 = new PIXI.Container();
			var div1 = document.getElementById('one'); 
			div1.appendChild(renderer1.view);
			var graphics = new PIXI.Graphics();
			graphics.beginFill(0xFF3300);
			graphics.lineStyle(10, 0xffd900, 1);
			graphics.moveTo(50,50);
			graphics.lineTo(250, 50);
			graphics.lineTo(100, 100);
			graphics.lineTo(250, 220);
			graphics.lineTo(50, 220);
			graphics.lineTo(50, 50);
			graphics.endFill();
			pixiStage1.addChild(graphics);
			renderer1.render(pixiStage1);
			
		   
      var renderer2  = PIXI.autoDetectRenderer(100, 200, { transparent: true, antialias: true });
			var pixiStage2 = new PIXI.Container();
			var div2 = document.getElementById('two'); 
			div2.appendChild(renderer2.view);
			var graphics = new PIXI.Graphics();
			graphics.beginFill(0x003377);
			graphics.lineStyle(10, 0xf0d900, 1);
			graphics.moveTo(50,50);
			graphics.lineTo(250, 50);
			graphics.lineTo(100, 100);
			graphics.lineTo(250, 220);
			graphics.lineTo(50, 220);
			graphics.lineTo(50, 50);
			graphics.endFill();
			pixiStage2.addChild(graphics);
			renderer2.render(pixiStage2);