JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>
<div class="main"></div>

CSS

.main{
    position: relative;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left bottom;
    overflow: hidden;
}

JavaScript

const imgSource = 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2071497438,1114925463&fm=173&s=FDB03BD55001A119BB8401E503003030&w=550&h=289&img.JPG';
//Aliases
let Application = PIXI.Application,
    Container = PIXI.Container,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Sprite = PIXI.Sprite;
//Create a Pixi Application
let app = new Application({
    width: 200,
    height: 200,
    antialiasing: true,
    transparent: false,
    resolution: 1
  }
);
//Add the canvas that Pixi automatically created for you to the HTML document
$('.main').append(app.view);
//load an image and run the `setup` function when it's done
loader
  .add(imgSource)
  .load(setup);
function setup() {
  //Create the `cat` sprite from the texture
  let cat = new Sprite(resources['https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2071497438,1114925463&fm=173&s=FDB03BD55001A119BB8401E503003030&w=550&h=289&img.JPG'].texture);
  cat.interactive = true;
  cat.width=100;
  cat.height=100;
  //Position the sprite and change its width and height
  cat.on('pointertap', function() {
     alert("hi i'm pappy");
  })
  //You can use this alternative syntax to set the
  //sprites anchor point, scale and rotation
  /*
  cat.anchor.set(0.5, 0.5);
  cat.position.set(120, 120);
  cat.scale.set(1.5, 3);
  */
  //Add the cat to the stage
  app.stage.addChild(cat);
}