JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">



<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<meta name="mobile-web-app-capable" content="yes">
<title>Predominant Educational Attainment</title>

<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="//js.arcgis.com/3.16/esri/css/esri.css" />
<style>
  /*
   * --------------------------------------------------------------------
   * The code within this style block would ideally go into an external
   * stylesheet such as:
   * <link rel="stylesheet" href="./css/app.css" />
   * --------------------------------------------------------------------
   */
  html, body, #ui-map-page, #ui-map-content, #ui-map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  #ui-settings-page {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  #ui-settings-content {
    margin: 1.25em;
  }

  /* zoom slider */
  .esriSimpleSlider div {
    width: 1.125em;
    height: 1.125em;
    font-size: 1.875em;
    line-height: 0.9375em;
  }

  .esriSimpleSliderHorizontal.esriSimpleSliderBR {
    right: 0.3125em;
    bottom: 1.625em;
  }

  @media screen and (min-width: 768px) {
    .esriSimpleSliderHorizontal.esriSimpleSliderBR {
      bottom: 2.875em;
    }
  }

  /* Search dijit */

  .arcgisSearch {
    display: block;
    top: 1.25em;
    left: 0.625em;
    right: 0.625em;
    position: absolute;
    height: 3.75em;
    width: auto;
    font-size: 1em;
    line-height: 1.25em;
    z-index: 3;
  }

  @media (min-device-width: 22.5625em) {
    .arcgisSearch {
      width: 22.5em;
    }
  }

  @media screen and (min-width: 768px) {
   ...