JSFiddle - React, Tailwind, and code Playground

by chrisguzman

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></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>
<section id="todoapp" ng-app="MyApp" ng-controller="Ctrl">
    <section ng-cloak>
        <ul id="todo-list">
            <li ng-repeat="(id,todo) in todos">
                <div class="view">
                    <label ng-dblclick="editTodo(id)">{{todo.title}}</label>
                </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>
</section>

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

var todomvc = angular.module('MyApp', ['firebase'])
    .controller('Ctrl', function Ctrl($scope, $location, $firebase) {


    var url = 'https://frontier.firebaseio.com/';
    var fireRef = new Firebase(url);


    $scope.$watch('todos', function () {
        var total = 0;
        var remaining = 0;
        $scope.todos.$getIndex().forEach(function (index) {
            var todo = $scope.todos[index];
            // Skip invalid entries so they don't break the entire app.
            if (!todo || !todo.title) {
                return;
            }

            total++;
            if (todo.completed === false) {
                remaining++;
            }
        });
        $scope.totalCount = total;
        $scope.remainingCount = remaining;
        $scope.completedCount = total - remaining;
        $scope.allChecked = remaining === 0;
    }, true);

    $scope.addTodo = function () {
        var newTodo = $scope.newTodo.trim();
        if (!newTodo.length) {
            return;
        }
        $scope.todos.$add({
            title: newTodo,
            completed: false
        });
        $scope.newTodo = '';
    };

    $scope.editTodo = function (id) {
        $scope.editedTodo = $scope.todos[id];
        $scope.originalTodo = angular.extend({}, $scope.editedTodo);
    };

    $scope.doneEditing = function (id) {
        $scope.editedTodo = null;
        var title = $scope.todos[id].title.trim();
        if (title) {
            $scope.todos.$save(id);
        } else {
            $scope.removeTodo(id);
        }
    };

    $scope.revertEditing = function (id) {
        $scope.todos[id] = $scope.originalTodo;
        $scope.doneEditing(id);
    };

    $scope.removeTodo = function (id) {
        $scope.todos.$remove(id);
    };

    $scope.toggleCompleted = function (id) {
        var todo = $scope.todos[id];
        todo.completed = !todo.completed;
        $scope.todos.$save(id);
    };

    $scope.clearCompletedTodos = function () {
       ...