JSFiddle - React, Tailwind, and code Playground

by Dano007

HTML

<!DOCTYPE html>

<!-- This landing page allows the user to login either using Parse or FB authentication. The user can also register and request login details. Once they have passed authentication the user is pushed to the main content url -->

<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<meta name="description" content="fresh Gray Bootstrap 3.0 Responsive Theme "/>
	<meta name="keywords" content="Template, Theme, web, html5, css3, Bootstrap,Bootstrap 3.0 Responsive Login" />
	<meta name="author" content="Adsays"/>
	<title>Parse JavaScript Todo App</title>
	<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<script src="scripts/underscore-1.1.6.js"></script>
	<script src="http://www.parsecdn.com/js/parse-1.2.13.min.js"></script>
	<script src="scripts/todos.js"></script>

	<link rel="shortcut icon" href="favicon.png"> 

	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.css" rel="stylesheet">

	<!-- Custom styles for this template -->
	<link href="css/login-theme-1.css" rel="stylesheet">
    <!-- 
	    <link href="css/login-theme-1.css" rel="stylesheet">
	    <link href="css/login-theme-2.css" rel="stylesheet">
	    <link href="css/login-theme-3.css" rel="stylesheet">
	    <link href="css/login-theme-4.css" rel="stylesheet">
	    <link href="css/login-theme-5.css" rel="stylesheet">
	    <link href="css/login-theme-6.css" rel="stylesheet">
	    <link href="css/login-theme-7.css" rel="stylesheet">
	    <link href="css/login-theme-8.css" rel="stylesheet">
	    <link href="css/login-theme-9.css" rel="stylesheet">
	    <link href="css/login-theme-10.css" rel="stylesheet">
	    <link href="css/login-theme-11.css" rel="stylesheet">
	    <link href="css/login-theme-12.css" rel="stylesheet">
	    <link href="css/login-theme-13.css" rel="stylesheet">
	    <link href="css/login-theme-14.css" rel="stylesheet">
	    <link href="css/login-theme-15.css" rel="stylesheet">  
	-->

	
	<!-- HTML5...

JavaScript

// An example Parse.js Backbone application based on the todo app by
// [Jérôme Gravel-Niquet](http://jgn.me/). This demo uses Parse to persist
// the todo items and provide user authentication and sessions.

$(function() {

  Parse.$ = jQuery;

  // Initialize Parse with your Parse application javascript keys
  Parse.initialize("XX",
                   "XX");

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

  // Our basic Todo model has `content`, `order`, and `done` attributes.
  var Todo = Parse.Object.extend("Todo", {
    // Default attributes for the todo.
    defaults: {
      content: "empty todo...",
      done: false
    },

    // Ensure that each todo created has `content`.
    initialize: function() {
      if (!this.get("content")) {
        this.set({"content": this.defaults.content});
      }
    },

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

  // This is the transient application state, not persisted on Parse
  var AppState = Parse.Object.extend("AppState", {
    defaults: {
      filter: "all"
    }
  });

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

  var TodoList = Parse.Collection.extend({

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

    // Filter down the list of all todo items that are finished.
    done: function() {
      return this.filter(function(todo){ return todo.get('done'); });
    },

    // Filter down the list to only todo items that are still not finished.
    remaining: function() {
      return this.without.apply(this, this.done());
    },

    // We keep the Todos in sequential order, despite being saved by unordered
    // GUID in the database. This generates the next order number for new items.
    nextOrder: function() {
      if (!this.length) return 1;
      return this.last().get('order') + 1;
    },

    // Todos are sorted by their original insertion order.
    comparator: function(todo) {
      return todo.get('order');
    }

...