JSFiddle - React, Tailwind, and code Playground

by Mike

HTML

<script src="https://github.com/pixijs/pixi.js/releases/download/v3.0.7/pixi.min.js"></script>
<body bgcolor="#444">
    
<div align="center">
	<canvas id="game" style="width: 400px; height: 400px; outline: none; border: 1px solid #fff;"></canvas>
</div>

</body>

JavaScript

$(function()
	{
	$( document ).ready(function()
		{
        var renderOptions   = 
            {
            antialiasing	: true, 
            transparent		: true, 
            resolition		: 1,
            view			: document.getElementById('game'),
            };
		var Renderer = new PIXI.WebGLRenderer(400,400, renderOptions);
		// GROUP
        var Group = new PIXI.Container();
        	Group.tint = 0xFF0000;
        // SPRITE
        var Spr   = new PIXI.Graphics();
        	Spr.beginFill(0xCCCCCC,1);
            Spr.drawRect(0,0,100,100);
        	Spr.endFill();
        	Spr.x = 100;
        	Spr.y = 100;
   		// SHADOW FILTER
        var shadow = new PIXI.filters.DropShadowFilter();
        shadow.alpha    = .5;
        shadow.angle    = 0;
        shadow.blur     = 8;
        shadow.distance = 10;
        shadow.color    = 0x000000;
        // BLUR FILTER
        var blur = new PIXI.filters.BlurFilter();
        blur.blur = 4;
        
        Spr.filters     = [shadow,blur];
        Group.addChild(Spr)
        
        var update = function()
            {
  			Renderer.render(Group)
			requestAnimationFrame(update)
            }
 
        update();
 		});
	});