JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/lib/OpenLayers.js"></script>
<script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox-2.6.min.js"></script>
<link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
<a href="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/facebook_circle-256.png" data-lightbox="image-1" title="My caption">image #1</a>
<div id="map"></div>

CSS

#map {
    width:800px;
    height:400px;
}

JavaScript

$(document).ready(function() {
    init();
});

var map, layer;
        function init(){
            map = new OpenLayers.Map( 'map');
            layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
            map.addLayer(layer);
            map.setCenter(
                new OpenLayers.LonLat(-71.147, 42.472).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), 4
            );    
        }