JSFiddle - React, Tailwind, and code Playground

by chrisguzman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.j"></script>
<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
<body>
    <section id="todoapp" ng-controller="TodoCtrl">
        <header id="header">
            	<h1>todos</h1>

            <form id="todo-form" ng-submit="addTodo()">
                <input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
            </form>
        </header>
        <section id="main" ng-show="totalCount" ng-cloak>
            <input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
            <label for="toggle-all">Mark all as complete</label>
            <ul id="todo-list">
                <li ng-repeat="(id, todo) in todos | todoFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
                    <div class="view">
                        <input class="toggle" type="checkbox" ng-model="todo.completed" ng-change="todos.$save(id)">
                        <label ng-dblclick="editTodo(id)">{{todo.title}}</label>
                        <button class="destroy" ng-click="removeTodo(id)"></button>
                    </div>
                    <form ng-submit="doneEditing(id)">
                        <input class="edit" ng-model="todo.title" todo-escape="revertEditing(id)" todo-blur="doneEditing(id)" todo-focus="todo == editedTodo">
                    </form>
                </li>
            </ul>
        </section>
        <footer id="footer" ng-show="totalCount" ng-cloak>	<span id="todo-count"><strong>{{remainingCount}}</strong>
					<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
				</span>

            <ul id="filters">
                <li>	<a ng-class="{selected: location.path() == '/'} " href="#/">All</a>

               ...

CSS

html, body {
    margin: 0;
    padding: 0;
}
button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 100%;
    vertical-align: baseline;
    font-family: inherit;
    color: inherit;
    -webkit-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
body {
    font: 14px'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.4em;
    background: #eaeaea url('bg.png');
    color: #4d4d4d;
    width: 550px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
button, input[type="checkbox"] {
    outline: none;
}
#todoapp {
    background: #fff;
    background: rgba(255, 255, 255, 0.9);
    margin: 130px 0 40px 0;
    border: 1px solid #ccc;
    position: relative;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.15);
}
#todoapp:before {
    content:'';
    border-left: 1px solid #f5d6d6;
    border-right: 1px solid #f5d6d6;
    width: 2px;
    position: absolute;
    top: 0;
    left: 40px;
    height: 100%;
}
#todoapp input::-webkit-input-placeholder {
    font-style: italic;
}
#todoapp input::-moz-placeholder {
    font-style: italic;
    color: #a9a9a9;
}
#todoapp h1 {
    position: absolute;
    top: -120px;
    width: 100%;
    font-size: 70px;
    font-weight: bold;
    text-align: center;
    color: #b3b3b3;
    color: rgba(255, 255, 255, 0.3);
    text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
}
#header {
    padding-top: 15px;
    border-radius: inherit;
}
#header:before {
    content:'';
    position: absolute;
  ...

JavaScript

(function () {
	'use strict';

	// Underscore's Template Module
	// Courtesy of underscorejs.org
	var _ = (function (_) {
		_.defaults = function (object) {
			if (!object) {
				return object;
			}
			for (var argsIndex = 1, argsLength = arguments.length; argsIndex < argsLength; argsIndex++) {
				var iterable = arguments[argsIndex];
				if (iterable) {
					for (var key in iterable) {
						if (object[key] == null) {
							object[key] = iterable[key];
						}
					}
				}
			}
			return object;
		}

		// By default, Underscore uses ERB-style template delimiters, change the
		// following template settings to use alternative delimiters.
		_.templateSettings = {
			evaluate    : /<%([\s\S]+?)%>/g,
			interpolate : /<%=([\s\S]+?)%>/g,
			escape      : /<%-([\s\S]+?)%>/g
		};

		// When customizing `templateSettings`, if you don't want to define an
		// interpolation, evaluation or escaping regex, we need one that is
		// guaranteed not to match.
		var noMatch = /(.)^/;

		// Certain characters need to be escaped so that they can be put into a
		// string literal.
		var escapes = {
			"'":      "'",
			'\\':     '\\',
			'\r':     'r',
			'\n':     'n',
			'\t':     't',
			'\u2028': 'u2028',
			'\u2029': 'u2029'
		};

		var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;

		// JavaScript micro-templating, similar to John Resig's implementation.
		// Underscore templating handles arbitrary delimiters, preserves whitespace,
		// and correctly escapes quotes within interpolated code.
		_.template = function(text, data, settings) {
			var render;
			settings = _.defaults({}, settings, _.templateSettings);

			// Combine delimiters into one regular expression via alternation.
			var matcher = new RegExp([
				(settings.escape || noMatch).source,
				(settings.interpolate || noMatch).source,
				(settings.evaluate || noMatch).source
			].join('|') + '|$', 'g');

			// Compile the template source, escaping string literals appropriately.
			var index = 0;
			var source =...