JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jquerygeo.com/test/jquery.geo-test.min.js"></script>
<div id="map">
</div>
<div id="pnlInsetContainer" class="Panel" style="width: 246px; height: 206px;">
  <div id="insetFrame">
    <div id="insetMap"></div>
  </div>
</div>

CSS

#map
    {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }

    /* these are from the 'inspired by' site */
    .Panel
    {
      position: absolute;
      background-color: White;
      border: solid 1px #8080A8;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      -webkit-box-shadow: #909090 2px 2px 4px;
      -moz-box-shadow: #909090 2px 2px 4px;
      box-shadow: #909090 2px 2px 4px;
    }

    #pnlInsetContainer
    {
      right: 6px;
      bottom: 6px;
    }

    #insetFrame
    {
      position: absolute;
      left: 2px;
      top: 2px;
      right: 2px;
      bottom: 2px;
      border: solid 1px Silver;
      overflow: hidden;
    }

    #insetMap
    {
      position: absolute;
      left: 0px;
      top: 0px;
    }

JavaScript

// create a map, use some tiles from S3
      var map = $( "#map" ).geomap( {
        services: [
          {
            type: "tiled",
            src: "http://s3.amazonaws.com/MapGeo_ME/Cumberland/Basemap/{{:zoom}}/{{:tile.row}}/{{:tile.column}}"
          }
        ],
        bbox: [-6.15983, 106.818545, -7.150975, 110.140259], //< set an initial bbox to Cumberland, ME
        zoom: 13, //< modify the bbox to force zoom level 13
        bboxchange: function( e, geo ) {
          // when the bbox changes, update the shape on the inset
          drawInsetBox(geo.bbox);
        }
      } );

      // create an inset map, it's static so user's can't mess with it
      var inset = $( "#insetMap" ).geomap( {
        tilingScheme: null, //< set to null because there are no tiled service, i.e., we're using bboxMax
        bboxMax: [-70.3444019030059, 43.730566740521596, -70.14623355132912, 43.849775819303616], //< required when you set tilingScheme to null, needs to precisely match our static image's bbox
        mode: "static",
        services: [
          {
            id: "inset",
            type: "shingled", //< we can use shingled services to display a single, unchanging image
            src: "http://www.mapgeo.com/CumberlandME/Custom/Images/Inset.png" //< our src is a single, static image
          }
        ],
        shapeStyle: {
          color: "#f00"
        }
      });

      // since mode is static, we can trap user events on the inset map div itself
      $( "#insetMap" ).click( function( e ) {
        // allow users to recenter by clicking the inset map

        // we don't get the geo argument (this is a normal jQuery event),
        // but we can ask jQuery Geo for it, we have to account for map placement
        var offset = $( "#insetMap" ).offset( ),
            geo = inset.geomap( "toMap", [
              e.pageX - offset.left,
              e.pageY - offset.top
            ] );

        // recenter the map
        map.geomap( "option",...