JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="icon" type="image/png" href="http://pslgis.cityofpsl.com/pslgis_webviewer/favicon.ico" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>
      City of PSL Planning and Zoning
    </title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dojox/grid/resources/Grid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dojox/grid/resources/tundraGrid.css">



    <!-- CSS -->
    <style>
    html, body, #mainWindow {
        font-family: sans-serif;
        height: 97%;
        width: 99%;
    background-image:url('images/bg.png');
    background-repeat: repeat;
    }

    html, body, #map {
        padding: 0;
  }

  #map {
    border-radius: 30px;
  }

  #bottomPane_splitter {
    background-image:url('images/bg.png');
    background-repeat: repeat;
    }

    #mainWindow {
     visibility: hidden;
    }

  #header {
    width: 79%;
    height:20%;
    float: left;
    float: left;
    overflow: hidden;
  }

  #wrapper {
    margin: 0 auto;
    width: 100%;
    height: 20%:
  }

  #titlecolumn {
    width: 17.5%;
    float: left;
  }

  #logocolumn {
    width: 3.5%;
    float: left;
  }

  h4{
    display: inline;
    color: #C99E3B;
  }

  h5{
    display: inline;
    color: white;
  }

  #AerialToggleButton {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 50;
    width: 67px;
    height: 85px;
    background-image:url('images/toggle.png');
  }


  #bottomPane {
    width: 20%;
    height: 20%;
   ...