JSFiddle - React, Tailwind, and code Playground
by Alex Azuero
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dojox/form/resources/RangeSlider.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; text-align: center }
.shadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
#map{ margin: 0; padding: 0; }
#feedback {
background: #fff;
color: #444;
position: absolute;
font-family: arial;
height: 210px;
left: 30px;
margin: 5px;
padding: 10px;
bottom: 30px;
width: 320px;
z-index: 40;
}
.note { font-size: 80%; padding: 0 0 10px 0; }
#slider {
color: #666;
margin: 5px auto;
padding: 3px;
}
#appSliderLabel { padding: 0 0 10px 0; }
#maxLabel { display: inline-block; margin: 0 0 0 -30px;}
#minLabel { display: inline-block; margin: 0 0 0 30px;}
#breakInfo { padding: 20px 0 0 0; }
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.16/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.HorizontalRuleLabels");
dojo.require("dojox.form.RangeSlider");
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.renderer");
dojo.require("esri.dijit.Legend");
// one global for persistent app variables
var app = {};
...