JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.14.2/css/ol.css">
<script src="http://openlayers.org/en/v3.14.2/build/ol.js"></script>
<div id="map" class="map"></div>

CSS

#map {
  position: relative;
}

JavaScript

var rome = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([12.5, 41.9]))
});

var london = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.12755, 51.507222]))
});

var madrid = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-3.683333, 40.4]))
});

rome.setStyle(new ol.style.Style({
  image: new ol.style.Circle({
    radius: 20,
    fill: new ol.style.Fill({color: '#8959A8'})
  }),
  text: new ol.style.Text({
    text: 'R'
  }),
  zIndex: 1
}));

london.setStyle(new ol.style.Style({
  image: new ol.style.Circle({
    radius: 20,
    fill: new ol.style.Fill({color: '#4271AE'})
  }),
  text: new ol.style.Text({
    text: 'L'
  }),
  zIndex: 2
}));

madrid.setStyle(new ol.style.Style({
  image: new ol.style.Circle({
    radius: 20,
    fill: new ol.style.Fill({color: [113, 140, 0, 1]})
  }),
  text: new ol.style.Text({
    text: 'M'
  }),
  zIndex: 3
}));


var vectorSource = new ol.source.Vector({
  features: [rome, london, madrid]
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

var rasterLayer = new ol.layer.Tile({
  source: new ol.source.TileJSON({
    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
    crossOrigin: ''
  })
});

var map = new ol.Map({
  layers: [rasterLayer, vectorLayer],
  target: document.getElementById('map'),
  view: new ol.View({
    center: ol.proj.fromLonLat([2.896372, 44.60240]),
    zoom: 1
  })
});