JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.1.1/css/ol.css">
<script src="http://openlayers.org/en/v3.1.1/build/ol.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js"></script>
<div id="map"></div>

CSS

html., body, #map {
    padding: 0;
    margin-left:0;
    width: 100%;
    height: 90%;
}

JavaScript

//Define Projection through Proj4.js
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 = ol.proj.get('EPSG:3857');

var projectionNL = ol.proj.get('EPSG:28992');
//This center does not work for some reason
//var Alkmaar = ol.proj.transform([112087.21, 515999.70], projectionNL, 'EPSG:3857');
 var Alkmaar = ol.proj.transform([4.75355239868168, 52.62976657605367], 'EPSG:4326', 'EPSG:3857');

projectionNL.setExtent([646.36, 308975.28, 276050.82, 636456.31]);

//Define styles and function to use in styles

var view = new ol.View({
    center: Alkmaar,
    zoom: 17,
    projection: projection
});

//Define Styles for the Layer1 (red points)

var image1 = new ol.style.Circle({
  radius: 5,
  fill: new ol.style.Fill({
    color: 'rgba(255,0,0,1)'
  }),
  stroke: new ol.style.Stroke({color: 'red', width: 1})
});

var styles1 = {
  'Point': [new ol.style.Style({
    image: image1
  })]
};

var styleFunction1 = function(feature, resolution) {
  return styles1[feature.getGeometry().getType()];
};

//Define Styles for the Layer2 (green points)

var image2 = new ol.style.Circle({
  radius: 5,
  fill: new ol.style.Fill({
    color: 'rgba(0,255,0,1)'
  }),
  stroke: new ol.style.Stroke({color: 'green', width: 1})
});

var styles2 = {
  'Point': [new ol.style.Style({
    image: image2
  })]
};

var styleFunction2 = function(feature, resolution) {
  return styles2[feature.getGeometry().getType()];
};



//And project a layer that does work (for reference)

var Layer1 = new ol.layer.Vector({
  source: new ol.source.GeoJSON({
      projection: 'EPSG:3857',
      object :...