JSFiddle - React, Tailwind, and code Playground

by tomwayson

HTML

<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.10/"></script>
<body class="claro">
    <div id="mapDiv"></div>
</body>

CSS

html, body, #mapDiv {
          padding:0;
          margin:0;
          height:100%;
      }

JavaScript

var map;
      require([
          "esri/map", "esri/layers/FeatureLayer",
          "esri/symbols/SimpleFillSymbol", 
        "esri/renderers/ClassBreaksRenderer",
        "esri/Color",
          "dojo/parser", "dojo/domReady!"], function (
      Map, FeatureLayer,
      SimpleFillSymbol, ClassBreaksRenderer, Color,
      parser) {
          parser.parse();
          map = new Map("mapDiv", {
              basemap: "gray",
              center: [-96.541, 38.34],
              zoom: 12
          });

          map.on("load", initOperationalLayer);

          function initOperationalLayer() {
              var symbol = new SimpleFillSymbol();
              symbol.setColor(new Color([150, 150, 150, 0.5]));
              
              // Add five breaks to the renderer.
              // If you have ESRI's ArcMap available, this can be a good way to determine break values.
              // You can also copy the RGB values from the color schemes ArcMap applies, or use colors
              // from a site like www.colorbrewer.org
              //
              // alternatively, ArcGIS Server's generate renderer task could be used
              var renderer = new ClassBreaksRenderer(symbol, "AREA_SQKM");
              renderer.addBreak(0, 25, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
              renderer.addBreak(25, 75, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
              renderer.addBreak(75, 175, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
              renderer.addBreak(175, 400, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
              renderer.addBreak(400, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
              var featureLayer = new FeatureLayer("http://watersgeo.epa.gov/arcgis/rest/services/NHDPlus_NP21/WBD_NP21_Simplified/MapServer/0", {
                  mode: FeatureLayer.MODE_ONDEMAND,
                  outFields: ["*"]
             ...