JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//openlayers.org/en/master/css/ol.css">
<script src="//openlayers.org/en/master/build/ol.js"></script>
<div id="map" class="map"></div>

CSS

html, body, #map {
    margin: 0;
    height: 100%;
    width: 100%
}

JavaScript

var projection = ol.proj.get('EPSG:4326');
var urlTemplate = 'http://data.mapguide.com/mapguide/mapagent/mapagent.fcgi?USERNAME=Anonymous&mapdefinition=Library%3A%2F%2FSamples%2FSheboygan%2FMapsTiled%2FSheboygan.MapDefinition&basemaplayergroupname=Base%20Layer%20Group&operation=GETTILEIMAGE&version=1.2.0&tilecol={x}&tilerow={y}&scaleindex={z}';
var metersPerUnit = 111319.4908;
var dpi = 96;
var tileSize = [300, 300];
var extent = [-87.764987, 43.691398, -87.695522, 43.797520];
var scales = [100000, 51794.74679, 26826.95795, 13894.95494, 7196.85673, 3727.59372, 1930.69773, 1000];

var inPerUnit = 39.37 * metersPerUnit;
var len = scales.length;
var resolutions = new Array(len);
for (var i = 0; i < len; ++i) {
    resolutions[i] = scales[i] / inPerUnit / dpi;
}

var tileGrid = new ol.tilegrid.TileGrid({
    origin: ol.extent.getTopLeft(extent),
    resolutions: resolutions,
    tileSize: tileSize
});

var map = new ol.Map({
    target: 'map',
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    }),

    new ol.layer.Tile({
        source: new ol.source.TileImage({
            tileGrid: tileGrid,
            projection: projection,
            tileUrlFunction: function (tileCoord) {
                return urlTemplate.replace('{z}', (7 - tileCoord[0]).toString())
                    .replace('{x}', tileCoord[1].toString())
                    .replace('{y}', (-tileCoord[2] - 1).toString());
            },
            wrapX: false
        })
    })],
    view: new ol.View({
        projection: projection,
        center: [-87.764987, 43.691398],
        resolutions: resolutions,
        zoom: 1
    })
});