JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/documentcloud/backbone/master/examples/todos/todos.js"></script>
<link rel="stylesheet" href="https://raw.github.com/documentcloud/backbone/master/examples/todos/todos.css">
<script src="https://raw.github.com/documentcloud/backbone/master/test/vendor/underscore-1.1.6.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/master/test/vendor/json2.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/master/backbone.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/master/examples/backbone-localstorage.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <title>Backbone Demo: Todos</title>
    <link href="todos.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="json2.js"></script>
    <script src="jquery-1.5.js"></script>
    <script src="underscore-1.1.6.js"></script>
    <script src="backbone.js"></script>
    <script src="backbone-localstorage.js"></script>
    <script src="backbone-relational.js"></script>
    <script src="todos.js"></script>
  </head>

  <body>

    <!-- Todo App Interface -->

    <div id="todoapp">

      <div class="title">
        <h1>Todos</h1>
      </div>

      <div class="content">

        <div id="create-todo">
          <input id="new-todo" placeholder="What needs to be done?" type="text" />
          <span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span>
        </div>

        <div id="todos">
          <ul id="todo-list"></ul>
        </div>

        <div id="todo-stats"></div>

      </div>

    </div>

    <ul id="instructions">
      <li>Double-click to edit a todo.</li>
      <li><a href="../../docs/todos.html">View the annotated source.</a></li>
    </ul>

    <div id="credits">
      Created by
      <br />
      <a href="http://jgn.me/">J&eacute;r&ocirc;me Gravel-Niquet</a>
    </div>

    <!-- Templates -->

    <script type="text/template" id="item-template">
      <div...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
body {
  line-height: 1;
  color: black;
  background: white;
}
ol, ul {
  list-style: none;
}
a img {
  border: none;
}

html {
  background: #eeeeee;
}
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4em;
    background: #eeeeee;
    color: #333333;
  }

#todoapp {
  width: 480px;
  margin: 0 auto 40px;
  background: white;
  padding: 20px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
  box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
}
  #todoapp h1 {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    padding: 20px 0 30px 0;
    line-height: 1;
  }

#create-todo {
  position: relative;
}
  #create-todo input {
    width: 466px;
    font-size: 24px;
    font-family: inherit;
    line-height: 1.4em;
    border: 0;
    outline: none;
    padding: 6px;
    border: 1px solid #999999;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
  }
    #create-todo input::-webkit-input-placeholder {
      font-style: italic;
    }
  #create-todo span {
    position: absolute;
    z-index: 999;
    width: 170px;
    left: 50%;
    margin-left: -85px;
  }

#todo-list {
  margin-top: 10px;
}
  #todo-list li {
   ...

JavaScript

// An example Backbone application contributed by
// [Jérôme Gravel-Niquet](http://jgn.me/). This demo uses a simple
// [LocalStorage adapter](backbone-localstorage.html)
// to persist Backbone models within your browser.

// The goal of this jsfiddle is to use the backbone-relational package to extend the above TODO app so that each item can have subitems.  The desired functionality includes:
//  - clicking on an item reveals an input field below the item.  Subitems may be added to this item by typing in this input field and pressing enter.
//  - clicking on an item will toggle the viewing of subitems.
//  - double clicking on subitems allows editing (just like regular items)
//  - FUTURE WORK: each subitem has a checkbox, and clicking an item's checkbox automatically checks all subitems.


// Load the application once the DOM is ready, using `jQuery.ready`:
$(function(){

  // Todo Model
  // ----------

  // Our basic **Todo** model has `text`, `order`, and `done` attributes.
  window.Todo = Backbone.RelationalModel.extend({

    relations: [{
            type: Backbone.HasMany,
            key: 'subitems',
            relatedModel: 'TodoSubitem',
            collectionType: 'TodoSubitemList',
            reverseRelation: {
                key: 'hasItems',
                includeInJSON: 'id'
// 'relatedModel' is automatically set to 'Todo';the 'relationType' to 'HasOne'.
            }
        }],

    // Default attributes for a todo item.
    defaults: function() {
      return {
        done:  false,
        order: Todos.nextOrder()
      };
    },

    // Toggle the `done` state of this todo item.
    toggle: function() {
      this.save({done: !this.get("done")});
    }

  });

  // Todo Collection
  // ---------------

  // The collection of todos is backed by *localStorage* instead of a remote
  // server.
  window.TodoList = Backbone.Collection.extend({

    // Reference to this collection's model.
    model: Todo,

    // Save all of the todo items...