JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
<div id="map"></div>
<script dojo-config="{async: true}"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.5"></script>

CSS

html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0px;
            font-family: helvetica, arial, sans-serif;
            font-size: 90%;
        }
        /* This stylesheet provides the structural CSS for the dgrid */
        .dgrid {
            position: relative;
            overflow: hidden;
            /* This is needed by IE to prevent crazy scrollbar flashing */
            border: 1px solid #ddd;
            height: 30em;
            display: block;
        }
        .dgrid-header {
            background-color: #eee;
            position: absolute;
            right: 17px;
            /* scrollbar width; revised in List.js if necessary */
            left: 0;
        }
        .dgrid-header-scroll {
            position: absolute;
            top: 0;
            right: 0;
        }
        .dgrid-footer {
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        .dgrid-header-hidden, html.has-quirks .dgrid-header-hidden .dgrid-cell {
            /*
		Used to "hide" header, without losing size information for reference.
		!important is used to supersede theme styles at higher specificity.
		Left/right box styles are untouched, as they may influence width of
		.dgrid-content as updated in Grid's resize method.
		Note: Still not quite perfect in IE Quirks mode (1px left over).
	*/
            font-size: 0;
            /* allow shrinkage in IE Quirks mode for Lists */
            height: 0 !important;
            border-top: none !important;
            border-bottom: none !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
        .dgrid-footer-hidden {
            /* Hiding footer is much simpler; simply set its display to none. */
            display: none;
        }
        .dgrid-sortable {
            cursor: pointer;
       ...

JavaScript

var map;
var identifyTask, identifyParams;
var urlSEFCRI = "http://egisws02.nos.noaa.gov/ArcGIS/rest/services/biogeo/SEFCRI/MapServer";

var layerSEFCRI;
var oldLayerName;
var tc;

require([
    "dojo/_base/array",
    "dojo/_base/connect",
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/parser",
    "dojo/ready",
    "dojo/Deferred",
    "dojo/store/Memory",
    "dgrid/OnDemandGrid",
    "dgrid/Selection",
    "dgrid/extensions/ColumnResizer",
    "dgrid/extensions/ColumnHider",
    "dgrid/extensions/DijitRegistry",

    "dijit/layout/ContentPane",
    "dijit/layout/TabContainer",
    "dijit/registry",

    "esri/map",
    "esri/InfoTemplate",

    "esri/dijit/Basemap",
    "esri/dijit/BasemapGallery",
    "esri/dijit/BasemapLayer",
    "esri/dijit/InfoWindow",

    "esri/arcgis/utils",

    "dijit/Menu",
    "dijit/form/DropDownButton",
    "dijit/layout/BorderContainer",

    "dojo/domReady!"

], function (
array, connect, declare, lang, parser, ready, Deferred, Memory, Grid, Selection, ColumnResizer, ColumnHider, DijitRegistry,
ContentPane, TabContainer, registry,
Map, InfoTemplate,
Basemap, BasemapGallery, BasemapLayer, InfoWindow) {
    ready(function () {
        //parser.parse();
    });

    map = new Map("map", {
        basemap: "oceans",
        //slider: false,
        showAttribution: true,
        logo: false,
        //infoWindow: popup,
        center: [-80.2, 26.67],
        zoom: 9
    });
    map.resize();
    layerSEFCRI = new esri.layers.ArcGISDynamicMapServiceLayer(urlSEFCRI, {
        id: 'SEFCRI'
    });
    map.addLayers([layerSEFCRI]);

    tc = new TabContainer({
        id: 'tabs',
        doLayout: false,
        style: {
            'width': '95%',
            'height': '100%'
        }
    }, dojo.create('div'));
    connect.connect(map, "onLayerAddResult", function (results) {
        layerSEFCRI.setVisibleLayers([0, 224, 227]);
        mapReady(map);
    });

    connect.connect(layerSEFCRI, "onLoad", function () {
   ...