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 href="http://fonts.googleapis.com/css?family=Asul" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/Nihilo/Nihilo.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/esri/dijit/css/Popup.css">
    
    <script>
      var dojoConfig = { 
        parseOnLoad: true
      };
    </script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6"></script>
    
  </head>
  <body class="nihilo">
    <div id="main-window" 
         data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">

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

        <div id="controls" class="shadow">
          <div id="basemaps_wrapper">
            <div id="streets" class="basemap">Streets</div>
            <div id="satellite" class="basemap">Satellite</div>
            <div id="gray" class="basemap selected">Gray</div>
          </div>
        </div>

        <!-- drop shadow divs -->
        <div id="ds">
          <div id="ds-t">
            <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 id="ds-b">
            <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...

CSS

html, body { 
  height: 100%; width: 100%;
  margin: 0; padding: 0;
} 
body{
  background-color: #fff; overflow:hidden; 
  font-family: "Asul", sans-serif;
}
.ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
#ds-t div, #ds-b div { width: 100%; }
#ds-b div { bottom: 0; }
#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; }

#map {
  position: relative;
}

#controls {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 300px;
  height: 36px;
  z-index: 50;
  padding: 5px;
  background: #fff;
}
#basemaps_wrapper {
  position: absolute;
  bottom: 10px;
  margin: 0 0 0 -109px; 
  left: 50%;
  border-top: 1px solid #ddd;
}

.basemap {
  cursor: pointer;
  display: inline-block;
  padding: 3px;
  text-align: center;
  width: 64px;
}

.selected {
  background: #ddd;
}
.shadow {
  -moz-box-shadow: 0 0 8px #888;
  -webkit-box-shadow: 0 0 8px #888;
  box-shadow: 0 0 8px #888;
}

JavaScript

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.layers.osm");
var app = {
  init: function() {
    var ext;
    
    ext = new esri.geometry.Extent({"xmin":-13689379,"ymin":3522705,"xmax":-12136178,"ymax":4367793,"spatialReference":{"wkid":102100}});
    app.map = new esri.Map("map", {
      "extent": ext,
      "logo": false,
      "slider": false,
      "wrapAround180": true
    });
    console.log("created map");

    app.add_layers();
  },

  add_layers: function() {
    var gray_base_url, gray_ref_url, streets_url, sat_url, sat_trans_url;

    app.basemaps = [];
    gray_base_url = "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer";
    gray_ref_url = "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer";
    streets_url = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
    sat_url = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
    sat_trans_url = "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer"


          app.basemaps.push(new esri.layers.OpenStreetMapLayer({ "id": "Gray_base", "visible": true }));
    
    app.basemaps.push(new esri.layers.ArcGISTiledMapServiceLayer(streets_url, { "id": "Streets", "visible": false }));
    // app.basemaps.push(new esri.layers.OpenStreetMapLayer({ "id": "Streets", "visible": false }));
    app.basemaps.push(new esri.layers.ArcGISTiledMapServiceLayer(sat_url, { "id": "Satellite", "visible": false }));
    app.basemaps.push(new esri.layers.ArcGISTiledMapServiceLayer(sat_trans_url, { "id": "Satellite_trans", "visible": false }));
    dojo.forEach(app.basemaps, function(bm) { 
      app.map.addLayer(bm); 
    });

    // set up basemap switching...event delegation
    dojo.connect(dojo.byId("basemaps_wrapper"), "onclick",...