JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/Nihilo/Nihilo.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">

    <script>var dojoConfig = { parseOnLoad: true };</script>

    <!-- app config loaded from a file stored on dropbox -->
    <script src="http://dl.dropbox.com/u/2654618/config_simple.js"></script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
  </head>
  <body class="nihilo">
    <div id="mainWindow" 
         data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="header" 
           data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'top'">
        ...title substituted from config here...
      </div>

      <div id="map" class="shadow" 
           data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'center'">

        
        <div id="ds"> <!-- drop shadow divs -->
          <div id="ds-h">
            <div class="ds h1 o1"></div>
            <div class="ds h2 o2"></div>
            <div class="ds h3 o3"></div>
            <div class="ds h4 o4"></div>
            <div class="ds h5 o5"></div>
          </div>
        </div> <!-- end drop shadow divs -->
            
      </div>

    </div>
  </body>
</html>

CSS

html, body { 
  height: 100%; width: 100%;
  margin: 0; padding: 0;
} 
body{
  background-color: #fff; overflow:hidden; 
  font-family: sans-serif;
} 
#header {
  padding-top: 4px;
  padding-right: 15px;
  background-color:#444; 
  color:#fff; 
  font-size:16pt; text-align:right;font-weight:bold;
  height:55px;
}

.ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
#ds-h div { width: 100%; }
#ds .o1 { filter: alpha(opacity=10); opacity: .1; }
#ds .o2 { filter: alpha(opacity=8); opacity: .08; }
#ds .o3 { filter: alpha(opacity=6); opacity: .06; }
#ds .o4 { filter: alpha(opacity=4); opacity: .04; }
#ds .o5 { filter: alpha(opacity=2); opacity: .02; }
#ds .h1 { height: 1px; }
#ds .h2 { height: 2px; }
#ds .h3 { height: 3px; }
#ds .h4 { height: 4px; }
#ds .h5 { height: 5px; }

JavaScript

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");

var map;
function init() {
  // use values from the config object
  dojo.byId('header').innerHTML = config.title || '<em>no title in config :(</em>';
  var configExtent = new esri.geometry.Extent(config.extent); 

  // fallback extent if not provided in the config object
  var initialExtent = new esri.geometry.Extent({"xmin":-13130160,"ymin":3968080,"xmax":-13092477,"ymax":3980080,"spatialReference":{"wkid":102100}});
  map = new esri.Map("map", {
    extent: config.Extent || initialExtent
  });
  dojo.connect(map, 'onLoad', function(map) {
    dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
  });
  var url = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
  var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url);
  map.addLayer(tiledLayer);
}
//show map on load 
dojo.ready(init);