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>Editable FeatureLayer with Attribute Inspector</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<style>
  html, body, #mapDiv{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #detailPane{
    padding: 6px;
    height:20px;
    color:#570026;
    font-size:12pt;
    font-weight:600;
    overflow: hidden;
  }
  .dj_ie .infowindow .window .top .right .user .content { position: relative; }
  .dj_ie .simpleInfoWindow .content {position: relative;}

  .esriAttributeInspector .atiLayerName {display:none;}
</style>

<script src="https://js.arcgis.com/3.16/"></script>
<script>
  var map, updateFeature;

  require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "esri/dijit/AttributeInspector",

    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/Color",
    "esri/renderers/UniqueValueRenderer",

    "esri/config",

    "esri/tasks/query",
    "dojo/dom-construct",
    "dijit/form/Button",

    "dojo/domReady!"
  ], function(
    Map, FeatureLayer, AttributeInspector,
    SimpleLineSymbol, SimpleMarkerSymbol, Color, UniqueValueRenderer,
    esriConfig,
    Query, domConstruct, Button
  ) {
    // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/jshelp/ags_proxy.html
    esriConfig.defaults.io.proxyUrl = "/proxy/";

    map = new Map("mapDiv", {
      basemap: "dark-gray",
      center: [-97.395, 37.537],
      zoom: 5
    });

    map.on("layers-add-result", initSelectToolbar);

    //Feature Layer representing 2015 men's NCAA basketball tournament teams
    var teamsFL = new...