JSFiddle - React, Tailwind, and code Playground

by bartek

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<header class="navbar navbar-fixed-top">
    <nav class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
            <div class="nav-collapse">
                <ul class="nav pull-right">
                    <li>
                        <a href="/"><i class="icon-home icon-white"></i></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<div id="space"></div>
<div class="container">
    <div class="row">
        <div class="span12">
            <form class="form-horizontal">
                <div class="row">
                    <div class="span6">
                        <div class="control-group">
                            <label class="control-label">Title</label>
                            <div class="controls">
                                <input type="text">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Description</label>
                            <div class="controls">
                                <textarea cols="4" rows="4"></textarea>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Preferences</label>
                            <div class="controls">
                                <textarea cols="4" rows="4"></textarea>
                   ...

CSS

/* Landscape phones and down */
@media (max-width: 480px) {
  .nav-collapse { -webkit-transform:translate3d(0,0,0); }
  .page-header h1 small {
    display:block;
    line-height:;
  }
  input[type="checkbox"], input[type="radio"] { border:1px solid #cccccc; }
  .form-horizontal .control-group > label {
    float:none;
    width:auto;
    padding-top:0;
    text-align:left;
  }
  .form-horizontal .controls { margin-left:0; }
  .form-horizontal .control-list { padding-top:0; }
  .form-horizontal .form-actions {
    padding-left:10px;
    padding-right:10px;
  }
  .modal {
    position:absolute;
    top:10px;
    left:10px;
    right:10px;
    width:auto;
    margin:0;
  }
  .modal.fade.in { top:auto; }
  .modal-header .close {
    padding:10px;
    margin:-10px;
  }
  .carousel-caption { position:static; }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {  
  body {
    padding-left:20px;
    padding-right:20px;
  }
  .navbar-fixed-top, .navbar-fixed-bottom {
    margin-left:-20px;
    margin-right:-20px;
  }
  .container-fluid { padding:0; }
  .dl-horizontal dt {
    float:none;
    clear:none;
    width:auto;
    text-align:left;
  }
  .dl-horizontal dd { margin-left:0; }
  .container { width:auto; }
  .row-fluid { width:100%; }
  .row, .thumbnails { margin-left:0; }
  [class*="span"], .row-fluid [class*="span"] {
    float:none;
    display:block;
    width:auto;
    margin-left:0;
  }
  .input-prepend input, .input-append input, .input-prepend input[class*="span"], .input-append input[class*="span"] {
    display:inline-block;
    width:auto;
  }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {  
  .nav-collapse { -webkit-transform:translate3d(0,0,0); }
  .page-header h1 small {
    display:block;
    line-height:;
  }
  input[type="checkbox"], input[type="radio"] { border:1px solid #cccccc; }
  .form-horizontal .control-group > label {
    float:none;
    width:auto;
    padding-top:0;
...

JavaScript

$(function() {
    new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(48.864715, 10.546875),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});