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>
<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>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">URL</label>
                            <div class="controls">
                                <input type="text">
                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div id="map" style="width: 100%; height: 370px;"></div>
                    </div>
                </div>
                <div class="form-actions">
                    <input class="btn btn-primary" value="Create...

CSS

body { padding-top: 60px; }

@media (max-width: 940px) {
  .span6 {
    width:100%;
    margin-left:30px;
  }
}

.span6 { min-width: 400px; max-width: 470px; }
.span12 { min-width: 940px; }

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
    });
});