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" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 20px 0 0 0;
background: url('http://i.imgur.com/rcnkH.png')
}
#map{
margin: 0;
padding: 0;
width: 800px;
height: 800px;
}
#container {
height: 800px;
width: 800px;
margin: 0 auto;
padding: 20px;
border-bottom: 1px solid #555;
box-shadow: inset 0 0 40px #000;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
var map;
function init() {
var initExtent = new esri.geometry.Extent({"xmin":-336350,"ymin":4294006,"xmax":3381546,"ymax":8011903,"spatialReference":{"wkid":102100}});
map = new esri.Map("map",{
extent: initExtent,
wrapAround180: true
});
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer");
map.addLayer(basemap);
dojo.connect(map, 'onLoad', function() {
dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
});
}
dojo.ready(init);
</script>
</head>
<body class="tundra">
<div...