JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.22.0/phaser.min.js"></script>

<div id="game">
  
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

#game {
  height: 300px;
  width: 400px;
}

JavaScript

/**
 * Handle the title scene in the game.
 */
class TitleScene extends Phaser.Scene {
  constructor(name, config) {
    super(name);
    this.config = config;
  }

  /**
   * Create most of the elements the scene uses.
   */
  create() {
    const title = this.add.text(this.config.scale.width / 2, this.config.scale.height / 2, 'Issue test', {
      font: 'bold 50px Verdana',
      fill: '#F00',
      stroke: '#FFF',
      strokeThickness: 10,
    }).setOrigin(0.5);

    title.setShadow(3, 4, 'rgba(0,0,0,0.5', 5, true, false);

    this.setupKeyboardInterations();
  }

  setupKeyboardInterations() {
    const fullScreen = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F);

    fullScreen.on('down', function() {
      if (this.scale.isFullscreen) {
        this.scale.stopFullscreen();
        document.getElementById(this.config.scale.parent).style.height = this.config.scale.height + 'px';
      } else {
        document.getElementById(this.config.scale.parent).style.height = '100%';
        this.scale.startFullscreen();
      }
    }, this);
  }
}


const config = {
  type: Phaser.AUTO,
  backgroundColor: "#dbcf8b",
  width: 400,
  height: 300,
  scale: {
    parent: 'game',
    width: 800,
    height: 600,
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
  physics: {
    default: 'arcade',
    arcade: {
      gravity: {
        y: 0
      },
      debug: false,
    },
  },
};

const SCENE_TITLE = 'TitleScene';

const game = new Phaser.Game(config);

const titleScene = new TitleScene(SCENE_TITLE, config);

game.scene.add(SCENE_TITLE, titleScene, true);