JSFiddle - React, Tailwind, and code Playground

by inser

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">
    <header>
        <div class="container editable">
            <div class="row-fluid">
                <div class="span3 logo">
                    <a href="/">
                        <img src="theoffermachine-logo.png" alt="The Offer Machine" /></a>
                </div>
                <div class="span9 title">
                    <h1>The Offer Machine</h1>
                </div>
            </div>
        </div>
    </header>

    <nav>
        <div class="container editable">
            <div class="visible-phone">
                <div class="menu-toggle">
                    <a href="#"></a>
                </div>
            </div>

            <ul class="navigation">
                <li><a href="/">Home</a></li>
            </ul>
        </div>
    </nav>

    <div id="content">
        <div class="container editable">
            <div class="row-fluid">
                <div class="span8 content">
                    <img src="homesplash2.png" />
                </div>
                <div class="span4 banner hidden-phone">
                    Put banner here
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="container editable">
            <a href="/" title="">Home</a>|<a href="#" title="">Unsubscribe</a>|<a href="PrivacyPolicy.aspx" target="_blank" title="">Privacy Policy</a>|<a href="TermsOfUse.aspx" target="blank" title="">Terms of Use</a>
            <span class="copyrights">&copy; Copyright </span>
        </div>
    </footer>

CSS

header,
footer,
nav,
#content {
  margin-bottom: 10px;
}
.content,
.logo,
.title,
.banner,
footer .container,
nav .container {
  outline: 1px dotted rgba(0, 0, 0, 0.1);
}
.content,
header {
  margin-bottom: 10px;
}
nav {
  text-align: center;
}
nav ul {
  list-style: none;
}
nav ul li {
  display: inline-block;
}
footer {
  text-align: center;
}
.copyrights {
  display: block;
}
.menu-toggle {
  width: 32px;
  height: 32px;
}
.menu-toggle a {
  background: url(stripes.png) no-repeat 0 0;
  display: block;
  width: 32px;
  height: 32px;
}
@media (max-width: 767px) {
  header {
    text-align: center;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    display: block;
  }
}

JavaScript

(function($)
  {
      $.fn.editor = function (options) {
        var defaults = {
            editorSelector : '.editable'
        };

        options = $.extend({}, defaults, options);

        var editors = [],
            $this = $(this);



        var init = function () {
            $.each($this.find(options.editorSelector), function () {
                editors.push($(this));
                $(this).click(edit);
            });
        }
        
        init();

        function edit(elem) {

        }
    }
  })(jQuery);


$(function() {
    $('body').editor();
});