JSFiddle - React, Tailwind, and code Playground
by swingley
HTML
<!doctype html>
<html>
<head>
<title>drop shadows! plus map!</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#ds-h div { width: 100%; }
#ds-v div { height: 100%; }
.ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
#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; }
#ds .v1 { width: 1px; }
#ds .v2 { width: 2px; }
#ds .v3 { width: 3px; }
#ds .v4 { width: 4px; }
#ds .v5 { width: 5px; }
#map { width: 100%; height: 100%; margin: 0; padding: 0; }
</style>
<script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
var map, resizeTimer;
function init() {
var initExtent = new esri.geometry.Extent({
"xmin":-13632648,
"ymin":4542594,
"xmax":-13621699,
"ymax":4546875,
"spatialReference":{"wkid":102100}
});
map = new esri.Map("map",{extent:initExtent});
var basemap = new esri.layers.ArcGISTiledMapServiceLayer(
"http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
);
map.addLayer(basemap);
dojo.connect(map, 'onLoad', function(theMap) {...