JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

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/3.1/js/dojo/dijit/themes/tundra/tundra.css">
    <!-- Gauge dijit CSS -->
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/Gauge.css">
    <!-- CSS for the demo -->
    <link rel="stylesheet" type="text/css" href="css/dashboard.css" />
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
      #dashboard { 
        background: #444;
        color: #fff;
        font-family: arial;
        height: auto; 
        overflow: hidden;
        padding: 5px;
        position: absolute;
        right: 30px;
        text-align: center;
        top: 30px;
        width: 300px;
        z-index: 40;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: 1px solid #fff;
      }

      #dashboardWidgets {
        background: #fff;
        color: #888;
        margin: 0 auto;
        text-align: left;
      }
    </style>

    <script>var dojoConfig = { 
      parseOnLoad: true
    };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.Gauge");
      
      var map;
      function init() {
        var ext = new...