JSFiddle - React, Tailwind, and code Playground

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>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://js.arcgis.com/3.20/"></script>
    <script>
      var map;
      
      require(["dojo/dom",
      "dojo/dom-attr",
      "dojo/_base/array",
      "esri/Color",
      "dojo/number",
      "dojo/parser",
      "dijit/registry",

      "esri/config","esri/map", "esri/geometry/Point","esri/layers/GraphicsLayer","esri/symbols/TextSymbol","esri/graphic","esri/SpatialReference","esri/Color", "esri/symbols/Font", "dojo/parser","dojo/domReady!"], 
	  function(dom, domAttr, array, Color, number, parser, registry, esriConfig,Map,Point,GraphicsLayer,TextSymbol,Graphic,SpatialReference,Color,Font) {
	   parser.parse();
        map = new Map("map", {
          basemap: "gray",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [23, 39], // longitude, latitude
          zoom: 6
        });
        map.on("load", initOperationalLayer);
		
		function initOperationalLayer(){   
		var cLayer = new GraphicsLayer();
        map.addLayer(cLayer);
        
       var cLayer = new GraphicsLayer();

for(var i=0; i <= mappoint.length;i++){
    var Textsymbol= new TextSymbol();
    Textsymbol.setAlign(TextSymbol.ALIGN_MIDDLE);
    Textsymbol.setOffset(0, 13);
    Textsymbol.setText(number);
    
    var graphic = new Graphic(new Point(parseFloat(lat),
    parseFloat(lat), wgs), Textsymbol);
    cLayer.add(graphic);
}

cLayer.setMaxScale(0);
cLayer.setMinScale(288895.277144);

labelArray.push(cLayer );
         
          }

          
          
      });
    </script>
  </head>

  <body>
    <div...