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>Test Map</title>
      <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
      <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <style>
         html, body {
         height: 100%;
         width: 100%;
         margin: 0; 
         padding: 0;
         overflow:hidden;
         }
         #leftPane{
         color:#000;
         width:250px;
         padding-bottom:15px;
         }
         #map{
         padding:0;
         }
         .details{
         font-size:14px;
         font-weight:600;
         padding-bottom:20px;
         }
         button{
         margin:2px;
         cursor:pointer;
         }
         .esriPrint {
         padding: 0;
         }
      </style>
      <script src="https://js.arcgis.com/3.23/"></script>
      <script>
         var map, tb;

         var printTask, Json;
         
     
     var storedMap= ' {"mapOptions":{"showAttribution":true,"extent":{"xmin":-717759.093670651,"ymin":7047191.24790069,"xmax":-673654.9283501637,"ymax":7058351.054030311,"spatialReference":{"wkid":102100,"latestWkid":3857}},"spatialReference":{"wkid":102100,"latestWkid":3857}},"operationalLayers":[{"id":"layer0","title":"layer0","opacity":1,"minScale":591657527.591555,"maxScale":70.5310735,"url":"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"},{"id":"NPWS Designated Areas","title":"NPWS Designated...