JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="map"></div>

CSS

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

JavaScript

var tresolution=[156543.03390625, 78271.516953125, 39135.7584765625,  19567.87923828125, 9783.939619140625, 4891.9698095703125,   2445.9849047851562, 1222.9924523925781];
	
		var	layers=[
				{url:"http://a.tile.openstreetmap.org/${z}/${x}/${y}.png",minzoom:0,maxZoom:4},
				{url:"http://b.tile.openstreetmap.org/${z}/${x}/${y}.png",minzoom:5,maxzoom:7,maxExtent:[-180,-90,0,90]},
				{url:"http://c.tile.openstreetmap.org/${z}/${x}/${y}.png",minzoom:5,maxzoom:7,maxExtent:[0,-90,180,90]}
		];

		function createLayer(l){
			var lay=new OpenLayers.Layer.OSM("xx",l.url,{
				isBaseLayer : false,
				alwaysInRange : false,
				maxResolution : tresolution[l.minzoom],
				minResolution : tresolution[l.maxzoom],
				//maxExtent : l.maxExtent || [-180,-90,180,90],
				crossOriginKeyword: null
			});
			return lay;
		}
		var lays=[];
		for(var i=0,len=layers.length;i<len;i++){
			var l=layers[i];
			var lay=createLayer(l);
			lays.push(lay);
		}
		
		window.onload=function(){
		
			map=new OpenLayers.Map("map",{
				resolutions:tresolution,
				allOverlays:true,
				layers:lays
			});
			map.setCenter(new OpenLayers.LonLat(659688.852138, 5710701.2962197),1);
		}