JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<script src="https://js.arcgis.com/3.16"></script>
<script>
  var dojoConfig = {
    parseOnLoad: true
  };

</script>

<body>
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      <div id="print-container-div"></div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>
</body>

CSS

html,
body,
#mainWindow {
  font-family: sans-serif;
  height: 100%;
  width: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}

#header {
  height: 80px;
  overflow: auto;
  padding: 0.5em;
}

JavaScript

var map;
require([
  "esri/map", "esri/layers/FeatureLayer", "esri/dijit/PopupTemplate", "esri/request",
  "esri/geometry/Point", "esri/graphic", "dojo/on", "dojo/_base/array",
  "esri/tasks/PrintTemplate", "esri/dijit/Print", "dojo/domReady!"
], function(
  Map, FeatureLayer, PopupTemplate, esriRequest, Point, Graphic,
  on, array, PrintTemplate, Print
) {
  var featureLayer;

  map = new Map("map", {
    basemap: "streets",
    center: [-80, 39],
    zoom: 7
  });

  var roadLayer = new esri.layers.FeatureLayer("http://gisags103.dev.geodecisions.local:6080/arcgis/rest/services/WVDOT_STIP/WVSTIP_DEV/MapServer/0", {
    mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
    outFields: ["*"],
    opacity: 0.5
  });
  map.addLayer(roadLayer);

  var printer = new Print({
    map: map,
    url: 'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task'
  }, 'print-container-div');
  printer.startup();

});