JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Basic Service Area</title>
  
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
  <style> 
    body, html, #main { 
      margin: 0; 
      padding: 0; 
      height: 100%; 
      width: 100%;
    }
  </style> 
  
  <script src="https://js.arcgis.com/3.15/"></script>
  <script>
    var map, serviceAreaTask, params, clickpoint;

    require([
      "esri/map", "esri/config", 
      "esri/tasks/ServiceAreaTask", "esri/tasks/ServiceAreaParameters", "esri/tasks/FeatureSet",
      "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
      "esri/geometry/Point", "esri/graphic",
      "dojo/parser", "dojo/dom", "dijit/registry", 
      "esri/Color", "dojo/_base/array",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
      "dijit/form/HorizontalRule", "dijit/form/HorizontalRuleLabels", "dijit/form/HorizontalSlider",
      "dojo/domReady!"
    ], function(
      Map, esriConfig, 
      ServiceAreaTask, ServiceAreaParameters, FeatureSet, 
      SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
      Point, Graphic,
      parser, dom, registry,
      Color, arrayUtils
    ) {
      parser.parse();

      //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to  
      //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic 
      //for details on setting up a proxy page.
      esriConfig.defaults.io.proxyUrl = "/proxy/";
      
      map = new Map("map", { 
        basemap: "streets",
        center: [-122.33, 47.60],
        zoom: 12
      });

      map.on("click",...