JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Popup Test</title>
        <meta name="viewport" content="width=device-width" />
       <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    </head>
    <body>
     
        <div id="map"></div>
        
        <div id="jpopup" title="Test">
           <p>Blah blah</p>
        </div>
      
              
        
       
        <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        
    </body>
    
    
</html>

CSS

#map { position:relative; width:200px; height:200px; }

JavaScript

var map;

$(function () {
    
    //init map
    map = new OpenLayers.Map('map', {});
    var wms = new OpenLayers.Layer.Google('Google Map Layer', { type: google.maps.MapTypeId.HYBRID });

    map.addLayer(wms);

    if (!map.getCenter()) {
        map.zoomToMaxExtent();
    }
    
    //init popup
    $("#jpopup").dialog({
        height: 400,
        width: 300,
        modal: true
    });
});