JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.5.0/ol-debug.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.5.0/ol-debug.js"></script>
<div id="map"></div>

CSS

#map {
  background-color: #000000;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.ol-mouse-position {
  color: #FF0000;
}

JavaScript

var extent = [0, -49152, 49152, 0];
var gw2Projection = new ol.proj.Projection({
  code: 'ZOOMIFY',
  units: 'pixels',
  extent: extent
})
var tilegrid = new ol.tilegrid.TileGrid({
  extent: extent,
  resolutions: [128, 64, 32, 16, 8, 4, 2, 1]
});

var mousePositionControl = new ol.control.MousePosition({
  coordinateFormat: ol.coordinate.createStringXY(0),
});

var map = new ol.Map({
  target: 'map',
  controls: [mousePositionControl],
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        tileGrid: tilegrid,
        url: 'https://tiles.guildwars2.com/1/1/{z}/{x}/{y}.jpg',
        projection: gw2Projection
      }),
    }),
    new ol.layer.Tile({
      source: new ol.source.TileDebug({
        tileGrid: tilegrid,
        projection: gw2Projection
      }),
    }),
  ],
  view: new ol.View({
    center: ol.extent.getCenter(extent),
    zoom: 1,
    projection: gw2Projection,
    extent:extent,
    resolutions: tilegrid.getResolutions()
  })
});