JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/craftyjs/Crafty/release/dist/crafty.js"></script>

JavaScript

Crafty.init(300, 300);
Crafty.background('rgb(249, 223, 125)');

var player = Crafty.e("2D, Canvas, Color, Collision, SolidHitBox, Fourway")
      .attr({ x: 20, y: 80, w: 53, h: 105 })
      .color('blue')
      .collision([3, 42], [49, 42], [49, 105], [3, 105])
      .fourway(4)
      .onHit("Solid", function(data) {
          for (var i = 0; i < data.length; ++i) {
          }
          console.log(data);
          if (this._movement) {
              this.x -= this._movement.x;
              this.y -= this._movement.y;
          }
      });

Crafty.e("2D, Canvas, Color, Collision, Solid")
      .attr({ x: 200, y: 20, w: 70, h: 70 })
      .color('green');

console.log("CBR:", player._cbr, "MBR:", player._mbr, "Collision polygon:", player.map);