JSFiddle - React, Tailwind, and code Playground

by mjmitche

HTML

<script src="https://github.com/maccman/book-assets/blob/master/ch12/todos/lib/backbone.js"></script>
<script src="https://github.com/maccman/book-assets/blob/master/ch12/todos/lib/backbone.localstorage.js"></script>
<script src="https://github.com/maccman/book-assets/blob/master/ch12/todos/lib/jquery.tmpl.js"></script>
<script src="https://github.com/maccman/book-assets/blob/master/ch12/todos/lib/json2.js"></script>
<script src="https://github.com/maccman/book-assets/blob/master/ch12/todos/lib/underscore.js"></script>
<html>
  <head>
    <title>Backbone Demo: Todos</title>
    <link href="todos.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="lib/json2.js"></script>
    <script src="lib/jquery.js"></script>
    <script src="lib/jquery.tmpl.js"></script>
    <script src="lib/underscore.js"></script>
    <script src="lib/backbone.js"></script>
    <script src="lib/backbone.localstorage.js"></script>
    <script src="todos.js"></script>
  </head>
  <body>

    <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" />
        </div>

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

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

    <!-- Templates -->
    
    <script type="text/template" id="item-template">
      <div class="todo {{if done}}done{{/if}}">
        <div class="display" title="Double click to edit...">
          <input class="check" type="checkbox" {{if done}}checked="checked"{{/if}} />
          <div class="todo-content">${content}</div>
          <span class="todo-destroy"></span>
        </div>
        <div class="edit">
          <input class="todo-input" type="text" value="${content}" />
        </div>
      </div>
    </script>

    <script type="text/template" id="stats-template">
      {{if total}}
        <span...

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 {
  padding: 12px 20px 11px 0;
  position: relative;
  font-size: 24px;
  line-height:...