JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.8/"></script>
 <body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" style="width:250px;">
        <div id="dir"></div>
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" id="map"></div>
   </div>
  </body>

CSS

html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      body {
        background-color:#FFF;
        overflow:hidden;
        font-family:"Trebuchet MS";
      }

JavaScript

require(["esri/urlUtils", "esri/map", "esri/dijit/Directions", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"],

      function(urlUtils, Map, Directions){
        //all requests to route.arcgis.com will proxy to the proxyUrl defined in this object.
    

        var map = new Map("map", {
          basemap: "streets",
          center:[-98.56,39.82],
          zoom: 4
        });

                  urlUtils.addProxyRule({
          urlPrefix: "route.arcgis.com",  
          proxyUrl: "/sproxy"
        });
        urlUtils.addProxyRule({
          urlPrefix: "traffic.arcgis.com",  
          proxyUrl: "/proxy"
        });

          
        var directions = new Directions({
                    map: map,
                    stops: ["Knoxville", "Chattanouga"],
                }, "dir");
          
        directions.on("load", function () {
                    console.log(directions);
                    console.log(map.loaded);
                    directions.getDirections();
        });

        directions.startup();
      });