JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.1/phaser.min.js"></script>
<div id="game-area">

</div>

JavaScript

var CANVAS_WIDTH = 600;
var CANVAS_HEIGHT = 400;

var game = new Phaser.Game(CANVAS_WIDTH, CANVAS_HEIGHT, Phaser.AUTO, 'game-area', { create: create, update: update});

var _platform;
var _object;
var _angle = 0;
function create(){
    // set stage physics
    game.stage.backgroundColor = 0x808080;
    game.physics.startSystem(Phaser.Physics.P2JS);
  
    _platform = fakeSprite(250, 200, 100, 20, '#0000dd');
    _object = fakeSprite(250, 240, 20, 20, '#0000dd');
    
    game.physics.p2.enable([_platform, _object]);
    _platform.body.kinematic = true;
    
}

function update(){
    rotate(_platform, 200, 200, 30, _angle++);
}

function rotate(obj, centerX, centerY, distance, angle) {
    var angle_rad = Math.PI/ 180 * angle;
    obj.body.x = centerX + distance * Math.cos(angle_rad);
    obj.body.y = centerY + distance * Math.sin(angle_rad);
}

function fakeSprite(x, y, w, h, c) {
    // create a new bitmap data object
    var bmd = game.add.bitmapData(w, h);

    // draw to the canvas context like normal
    bmd.ctx.beginPath();
    bmd.ctx.rect(0,0,w, h);
    bmd.ctx.fillStyle = c;
    bmd.ctx.fill();

    // draw arrow pointing to right
    bmd.ctx.beginPath();
    bmd.ctx.moveTo(0, (h/2));
    bmd.ctx.lineTo(w, (h/2)); // middle line
    bmd.ctx.lineTo((w/2), (h/3)); // top arrow line
    bmd.ctx.moveTo((w/2), h-(h/3));
    bmd.ctx.lineTo(w, (h/2)); // bottom arrow line

    // draw the lines    
    bmd.ctx.strokeStyle = '#000000';
    bmd.ctx.stroke();

    // use the bitmap data as the texture for the sprite
    var sprite = game.add.sprite(x, y, bmd);
    return sprite;
}