JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://examples.phaser.io/_site/js/phaser.js"></script>

JavaScript

var yourSprite;
var spriteRect;

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', {
    preload: preload,
    create: create,
    update: update,
    render: render
});

function preload() {

}

function create() {
    
    rectWidth = 240;
    rectHeight = 140;
    
    //example 1
    var rect = game.make.bitmapData(rectWidth, rectHeight);
    rect.ctx.fillStyle = '#ff0000';
    rect.ctx.fillRect(0, 0, rectWidth, rectHeight);

    yourSprite = game.add.sprite(100, 20, rect);
    yourSprite.inputEnabled = true;
    yourSprite.enableBody = false;
    yourSprite.events.onInputDown.add(testFunc2, this);

    
    //example 2 - a bit buggy ??
    spriteRect = new Phaser.Sprite(game, 100, 200);
    
    var rectGraphics = game.add.graphics(0, 0);
    rectGraphics.beginFill(0xfff000);
    rectGraphics.drawRect(0, 0, rectWidth, rectHeight);
    rectGraphics.endFill();
    
    spriteRect.addChild(rectGraphics);

    spriteRect.inputEnabled = true;
    spriteRect.enableBody = false;
    spriteRect.events.onInputDown.add(testFunc1, this);
    game.add.existing(spriteRect);

}

function update() {

}

function render () {
    // Input debug info
    game.debug.inputInfo(502, 30);
    game.debug.spriteInputInfo(yourSprite, 502, 130);
    game.debug.spriteInputInfo(spriteRect, 502, 230);
    
    game.debug.pointer( game.input.activePointer );
    
    game.debug.spriteBounds(spriteRect);
    game.debug.spriteBounds(yourSprite);
    
}

function testFunc1() {
    console.log("click on rectangle1");
}

function testFunc2() {
    console.log("click on rectangle2");
}