JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var tileGrid = ol.tilegrid.createXYZ({
        minZoom: 7,
        maxZoom: 7
    });
var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON({
        defaultDataProjection: 'EPSG:3857'
    }),
    strategy: ol.loadingstrategy.tile(tileGrid),
    url: function(extent, resolution) {
        var tileCoord = tileGrid.getTileCoordForCoordAndResolution(
            ol.extent.getCenter(extent), resolution);
        return 'http://drifted.in/other/ol/tiles_s/' +
            tileCoord[0] + '/' +
            tileCoord[1] + '/' +
            (Math.pow(2, tileCoord[0]) + tileCoord[2]) + '.json';
    }
});
vectorSource.on('addfeature', function(e) {
    e.feature.setId(undefined);
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    renderMode: "vector",
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: '#2B8383'
        })
    })
});

var map = new ol.Map({
    target: 'map',
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    }),
    vectorLayer],
    view: new ol.View({
        center: [1560000, 6500000],
        zoom: 7
    })
});