JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.openlayers.org/dev/OpenLayers.js"></script>
<div id="map" style="background-color:blue" class="smallmap"></div>

CSS

@import url('http://openlayers.org/dev/theme/default/style.css');
@import url('http://openlayers.org/dev/examples/style.css');
.olPopupContent{
    padding: 0;
}
.olPopupContent,
.olFramedCloudPopupContent {
}
/* Tourn on "img opacity" to see the overlap of the frames, can see:
      * a white horizontal line on the right side of the "tr" popup (fixed)
      * white horizontal lines at the intersection of the stem to the body of the popups(not fixed here)
.olPopup img {opacity: 0.50; filter: alpha(opacity=50);}
*/

JavaScript

// FramedCloud Popup: adjust the insertion point ( https://github.com/openlayers/openlayers/issues/613 )

var points = new OpenLayers.Layer.Vector("Points");
// Crate map
var map = new OpenLayers.Map("map",{
    layers: [new OpenLayers.Layer("foo", {isBaseLayer: true}), points],
    theme: null
});
map.zoomToMaxExtent();

// Function to show a popup and point of insertion.
var showPopup = function (relPos, xy) {
    var popup, 
        popupCls,
        lonLat = new OpenLayers.LonLat(xy[0], xy[1]);
    
    // the popup
    popupCls = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
        relativePosition: relPos,
        fixedRelativePosition: true,
        autoSize: false
        
    });


    popup = new popupCls(null, lonLat, new OpenLayers.Size(150,30), relPos);
    map.addPopup(popup);
    
    //popupCls.setBackgroundColor('#FFFF00');

    // insertion point as a anchored popup
    popupCls = OpenLayers.Class(OpenLayers.Popup.Anchored, {
        calculateRelativePosition: function(){
            return relPos;
        }
    });
    popup = new popupCls(null, lonLat, new OpenLayers.Size(6,6), "");
    popup.setOpacity(0.6);
    popup.setBackgroundColor("orange");
    map.addPopup(popup);

    // insertion point as a point geometry
    points.addFeatures(
        new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point(xy[0], xy[1]), 
            {}, {
                pointRadius: 6,
                graphicName: 'cross',
                fillColor: 'red',
                strokeOpacity: 0
        })
    );
};

// the popups of the four corners
var x = -10,
    y = 5;
showPopup("tl", [x,  y]);
showPopup("bl", [x, -y]);
x += 70;
showPopup("tr", [x,  y]);
showPopup("br", [x, -y]);