JSFiddle - React, Tailwind, and code Playground

by dbouwman

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
    <link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=typicons">
    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
    </style>

    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
    <script>
      var map;
    
      require([
        "esri/map", "esri/geometry/Point", "esri/layers/GraphicsLayer", 
        "esri/graphic", "esri/symbols/Font", "esri/symbols/TextSymbol",
        "dojo/_base/Color"
      ], function(Map, Point, GraphicsLayer, Graphic, Font, TextSymbol, Color) {
          map = new Map("map", {
            basemap: "streets",
            center: [ 19.291, 48.343 ],
            zoom: 4,
            minZoom: 4,
            maxZoom: 4,
            slider: false
          });
          map.on("load", function() {
            var layer = map.addLayer(new GraphicsLayer({ id: "icons" }));
            var typicons = new Font("3em", null, null, null, "Typicons");
            var purple = new Color("#8258FA");
            var i, j, x, y, increment = 65;
            var xinc = map.extent.getWidth() / 6;
            var yinc = map.extent.getHeight() / 6;
            var xmin = map.extent.xmin;
            var ymin = map.extent.ymin;
            // five rows, five columns of symbols
            for (i = 1; i < 6; i++) {
              y = ymin + (i * yinc);
              for (j = 1; j < 6; j++) {
                var x = xmin + (j * xinc);
                var point = new Point(x, y, { wkid: 102100 });
                var text = new TextSymbol(
                  // generate letters...
        ...