JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var game;
var _symbols1;
console.log(1);
window.onload = function() {
    
    var game = new Phaser.Game(400, 400, Phaser.AUTO, '', { preload: preload, create: create });

     function preload () {
         game.load.image('empty-card', 'https://dl.dropboxusercontent.com/u/1663784/empty-card.svg');
         game.load.image('suit-moons', 'https://dl.dropboxusercontent.com/u/1663784/moons.svg');
         game.load.image('rank-2', 'https://dl.dropboxusercontent.com/u/1663784/rank-2.svg');
     }

    function create () {
        // the structure is:
        // cardGroup
        //   - empty-card (the rounded rectangle background)
        //   - _symbols1
        //      - rank-2
        //      - suit-moons 
        
        var cardGroup = game.add.group();
        cardGroup.create(0,0, "empty-card");
        
        _symbols1 = new Phaser.Group(game, cardGroup);
        var rank = _symbols1.create(21, 21, 'rank-2');
        rank.anchor.setTo(0.5, 0.5);
        rank.width = 32;
        rank.height = 32;
        
        var suit = _symbols1.create(21, 47, 'suit-moons');
        suit.anchor.setTo(0.5, 0.5);
        suit.width = 32;
        suit.height = 32;
        
        _symbols1.x = 88;
        _symbols1.y = 110;
        
        // If these three lines are commented,
        // the two symbols appear correctly at 
        // the bottom-right. I'd like to rotate
        // them around, but doing it
        // this way also changes the position...
        _symbols1.pivot.x = .5;
        _symbols1.pivot.y = .5;
        _symbols1.angle = 180;
    }
    
};