JSFiddle - React, Tailwind, and code Playground

by swingley

HTML

<!doctype html>
<html>
<head>
  <title>no drop shadow :( but there's still a 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; }

    #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) { 
          dojo.connect(dijit.byId('map'), 'resize', function() { 
            clearTimeout(resizeTimer);
            console.log('resize');
            resizeTimer = setTimeout( function() {
              map.resize();
              map.reposition();
            }, 500);
          });
        });
      }
      dojo.ready(init);
  </script>
</head>
<body class="claro">
  <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
    <div id="map" dojotype="dijit.layout.ContentPane" region="center">
    
    <!-- drop shadow divs -->
    <div id="ds">
      <div id="ds-h">
        <div class="ds h1 o1"></div>
       ...