JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/css/ol.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<div id="map" class="map"></div>

CSS

.map {
        height: 400px;
        width: 100%;
      }

JavaScript

var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([6, 51]),
          zoom: 6
        })
      });
      
var url = 'http://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1870/MapServer/WMTS';
   

proj4.defs("EPSG:28992","+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.417,50.3319,465.552,-0.398957,0.343988,-1.8774,4.0725 +units=m +no_defs");
  
var projection = new ol.proj.get('EPSG:28992');
ol.proj.get('EPSG:28992').setExtent([12628.0541, 308179.0423, 283594.4779, 611063.1429]);
var resolutions = [3251.206502413005, 1625.6032512065026, 812.8016256032513, 406.40081280162565, 203.20040640081282, 101.60020320040641, 50.800101600203206, 25.400050800101603, 12.700025400050801, 6.350012700025401, 3.1750063500127004, 1.5875031750063502, 0.7937515875031751, 0.39687579375158755, 0.19843789687579377, 0.09921894843789689, 0.04960947421894844]
var matrixIds = new Array(14);
for (var z = 0; z < 14; ++z) {
  // generate resolutions and matrixIds arrays for this WMTS
  matrixIds[z] = z;
}

var arcgislayer = new ol.layer.Tile({
    opacity: 0.7, 
    source: new ol.source.WMTS({
        url: 'http://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1870/MapServer/WMTS/',
        layer: 'Historische_tijdreis_1870',
        matrixSet: 'default028mm',
        format: 'image/jpgpng',
        projection: projection,
        tileGrid: new ol.tilegrid.WMTS({
          origin: [-3.05155E7, 3.1112399999999993E7],
          resolutions: resolutions,
          matrixIds: matrixIds
        }),
        style: 'default',
      })
    })
  
  arcgislayer.setMap(map)