JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://js.arcgis.com/4.8/"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
 <div id="viewDiv"></div>

JavaScript

require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
  var  map = new Map({
    basemap: "streets-navigation-vector"
  });

  var view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 12,
    center: {
      latitude: 32.7353,
      longitude: -117.1490
    }
  });

  view.graphics.add({
    symbol: {
      type: "simple-marker",
      color: "cyan"
    },
    geometry: {
      type: "point",
      longitude: -117.1490,
      latitude: 32.7353
    }
  });

  view.graphics.add({
    symbol: {
      type: "text",
      color: "#7A003C",
      text: "\ue61d", // esri-icon-map-pin
      font: {
        size: 30,
        family: "CalciteWebCoreIcons"
      }
    },
    geometry: {
      type: "point",
      longitude: -117.1490,
      latitude: 32.7353
    }
  });

});


require([ "esri/Map", "esri/views/MapView" ], function(
        Map, MapView
        ) {
  var  map = new Map({
    basemap: "streets-navigation-vector"
  });

  var  view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 12,
    center: {
      latitude: 32.7353,
      longitude: -117.1490
    }
  });

  var  contentString = "The <a href='http://zoo.sandiegozoo.org/'>San Diego Zoo</a> " + 
      " in Balboa Park houses over 3,700 animals." +
      "<p><p><img src='https://visitoceanside.org/wp-content/uploads/2013/01/SanDiegoZoo.jpg' alt='San Diego Zoo' height='150'>"; 

  view.graphics.add({
    symbol: {
      type: "text",
      color: "#7A003C",
      text: "\ue61d", // esri-icon-map-pin
      font: {
        size: 30,
        family: "CalciteWebCoreIcons"
      }
    },
    geometry: {
      type: "point",
      longitude: -117.1490,
      latitude: 32.7353
    },
    popupTemplate: {
      title: "San Diego Zoo",
      content: contentString
    }
  });
});