JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.3/pixi.min.js"></script>
<div id='root'>
</div>

CSS

body {
  margin: 0px;
}

JavaScript

const renderer = PIXI.autoDetectRenderer({
	width: window.innerWidth,
  height: window.innerHeight,
  antialias: true,
  transparent: false,
  preserveDrawingBuffer: false,
  clearBeforeRender: true
});
document.getElementById('root').appendChild(renderer.view);
const stage = new PIXI.Container();
      
function getPolygon(n,x,y,radius) {
	const polygon = new PIXI.Graphics();
  polygon.position.set(x,y);
  const points = new Array(2*n);
  for (let i=0; i<n; ++i) {
  	const r = i%4 < 2 ? radius : 0.75*radius;
    const w = -2*Math.PI*i/n;
    points[2*i] = r*Math.cos(w);
    points[2*i+1] = r*Math.sin(w);
  }
  polygon.beginFill(0xff0000, 1).lineStyle(2,0xffffff).drawPolygon(points).endFill();
  polygon.interactive = true;
  polygon.buttonMode = true;
  return polygon;
}

for (let i=0; i<10; ++i)
	stage.addChild(getPolygon(4*Math.floor(100*Math.random()), 100+600*Math.random(), 100+600*Math.random(), 50+150*Math.random()));

renderer.render(stage);