JSFiddle - React, Tailwind, and code Playground

by rhewitt

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<header>
    <div id="org-bar"></div>
    <div id="title-bar">
         <h1>Insert title here!</h1>

    </div>
    <div id="search-bar"></div>
</header>
<section id="sidebar"></section>
<section id="map"></section>
<footer></footer>

CSS

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}
/* line 1, ../sass/_header.scss */
 header {
    height: 120px;
    margin: 0;
    padding: 0;
}
/* line 6, ../sass/_header.scss */
 header #logo {
    position: absolute;
    left: 40px;
    top: 8px;
}
/* line 12, ../sass/_header.scss */
 header #org-bar {
    height: 36px;
    background-color: #000;
    color: #fff;
}
/* line 17, ../sass/_header.scss */
 header #org-bar h2 {
    padding: 7px 0 0 0;
    margin: 0 0 0 150px;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
}
/* line 25, ../sass/_header.scss */
 header #title-bar {
    height: 48px;
    background-color: #fff;
    color: #000;
}
/* line 30, ../sass/_header.scss */
 header #title-bar h1 {
    padding: 10px 0 0 0;
    margin: 0 0 0 150px;
    font-size: 28px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
/* line 39, ../sass/_header.scss */
 header #search-bar {
    height: 36px;
    background-color: #369;
}
/* line 1, ../sass/_sidebar.scss */
 #sidebar {
    height: 100%;
    width: 450px;
    min-width: 400px;
    max-width: 650px;
    background-color: green;
    float: left;
}
/* line 1, ../sass/_map.scss */
 #map {
    height: 100%;
    width: 70%;
}
/* line 1, ../sass/_footer.scss */
 footer {
    height: 75px;
    text-align: center;
    padding: 20px 0 0 0;
    background-color:#369;
}
/* line 6, ../sass/_footer.scss */
 footer p {
    color: #000;
}

JavaScript

$(document).ready(function () {
    createMap();
});

// Resize the map based on window and sidebar size
//$(window).resize(resetLayout); // Maximum run of once per 1/2 second for performance

var createMap = function () {
    var map = L.map('map').setView([35.302, -85.381], 6);

    // For a list of basemaps see http://leaflet-extras.github.io/leaflet-providers/preview/
    var terrain = L.tileLayer('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.opencyclemap.org">OpenCycleMap</a>, &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    }).addTo(map);

    var aerial = L.tileLayer('http://oatile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg', {
        attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency',
        subdomains: '1234'
    });
};