JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css">
<div style="width:80%; height:80%; position:fixed; border: 1px solid;" id="map"></div>

JavaScript

var map = new ol.Map({
    target: 'map',
    controls: [],
    layers: [
        new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'osm'})
        }),
    ],
        view: new ol.View({
        center: ol.proj.transform([4.9030, 52.3667], 'EPSG:4326', 'EPSG:3857'),
    zoom: 17
})
});


var lineString = new ol.geom.LineString([
    [4.9020, 52.3667],
    [4.9030, 52.3667],
    [4.9040, 52.3667],
    [4.9050, 52.3667]
]);
lineString.transform('EPSG:4326', 'EPSG:3857');

var lineLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [new ol.Feature({
            geometry: lineString,
            name: 'Line'
        })]
    }),
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({color: 'red', width: 20}),
        fill: new ol.style.Fill({color: 'white', width: 10}),
    })
});

map.addLayer(lineLayer);