JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/en/v4.0.1/build/ol.js"></script>
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
<div id="map" class="map"></div>

JavaScript

var extent = ol.proj.transformExtent([-14, 61, 7, 48], 'EPSG:4326', 'EPSG:3857');
var projection = new ol.proj.Projection({
		code: 'static-image',
		units: 'pixels',
		extent: extent
});

var map = new ol.Map({
  layers: [
   
    new ol.layer.Image({
      source: new ol.source.ImageStatic({
        url: 'https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg',
        projection: projection,
        imageExtent: extent
      })
    })
  ],
  target: 'map',
  view: new ol.View({
  center: ol.proj.transform([-1.73, 54.32], 'EPSG:4326', 'EPSG:3857'),
  zoom: 5
  })
});