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">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Feature Layer - display results as an InfoWindow onHover</title>
  <link rel="stylesheet" href="//js.arcgis.com/3.16/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/tundra/tundra.css">
    
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
    #leftDiv {
        width:280px;
        height:100%;    
        float:left;
    }
    #mapDiv {
      margin-left: 280px;
        height:100%;            
    }



    .gaugeContainer {
    text-align:center;
    }

    #resultDiv {
    height:200px;
    }

    </style>

    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
      var map, dialog;
      require([
////ESRI =========================
        "esri/map", 
        "esri/dijit/PopupTemplate",//1
        "esri/layers/FeatureLayer", 
        "esri/dijit/Legend",
        "esri/renderers/SimpleRenderer",
        "esri/renderers/smartMapping", 
         "esri/dijit/Gauge",
         "dojo/_base/array",
                
        "esri/symbols/SimpleMarkerSymbol", //Used for selecting features based on the search
        "esri/symbols/SimpleLineSymbol",  //Used for selecting features based on the search
       
        "esri/graphic", "esri/lang", //Used for selecting features based on the search
        "esri/tasks/query",  
        "esri/Color",

////DOJO DIJI =========================
        "dojo/dom", 
        "dojo/on",
        "dojo/number",
        "dojo/dom-style", 
        "dijit/TooltipDialog", 
        "dijit/popup",
        
        "dojo/dom-construct",
        "dojo/data/ItemFileReadStore",
       ...