JSFiddle - React, Tailwind, and code Playground

by jasalguero

HTML

<script src="https://senseship.herokuapp.com/public/javascripts/leaflet.js"></script>
<link rel="stylesheet" href="https://senseship.herokuapp.com/public/stylesheets/leaflet.css">
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
      
    <!-- JSFIDDLE EDITS -->
      
    <style>
      @media (max-width: 979px) {

        body {
          padding-top: 60px;
        }

        .navbar-fixed-top {
          position: absolute;
        }
        
        .show-mobile-nav {
          height: auto;
        }  
        
      }
    </style>
    
      <!-- /END JSFIDDLE EDITS -->
      
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span...

JavaScript

$(function() {
    $('.btn-navbar').click(function() {
        $('.nav-collapse').toggleClass('show-mobile-nav');
        return false;
    });
});

var map = new L.Map('mapSelector');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
    cloudmadeAttribution = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://cloudmade.com">CloudMade</a>',
    cloudmade = new L.TileLayer(cloudmadeUrl, {

        attribution: cloudmadeAttribution,
        maxZoom: 18
    });

var london = new L.LatLng(51.505, -0.09);
// geographical point (longitude and latitude)
map.setView(london, 13).addLayer(cloudmade);