JSFiddle - React, Tailwind, and code Playground

by Osoascam

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<ul id="messages">
    <li id="li01">...loading...</li>
    <li id="li02">...loading...</li>
    <li id="li03">...loading...</li>
</ul>

CSS

body {
    font-family: "Segoe UI", "Calibri", "Arial", "Helvetica";
    font-size: 1.1em;
}

li {
    padding: 0.5em;
    background: #9B7;
    margin: 1em;
    border-radius: 3px;
    box-shadow: 0 0 5px 2px rgba(90,110,90,0.2);
    text-align: center;
    text-shadow: 1px 1px 0 #FFF;
}

JavaScript

// Module definition
// =================
// This is the Module than encapsulates the whole application
/* ----------------------------------------------------------- */
(function($, window, undefined) {

    // Namespace reference
    var Module = window.Module = window.Module || {};
    // modules namespace
    Module.Modules = {};
    // pages namespace
    Module.Pages = {};
    // let's pretend there's code in here
    console.log("Created Module");
})(jQuery, window);


// Ajax Service Module
// --------------------
// This Module deals with all ajax calls
/* ----------------------------------------------------------- */ 
(function($, window, Module) {

    Module.AjaxInterface = function(settings) {
        var callback = settings.successCallback,
            parameters = settings.successCallbackParameters,
            sentData = settings.json,
            self = this;
        this.ajaxCall = function() {
            $.ajax({
                url: "/echo/json/",
                data: {
                    json: $.toJSON(sentData),
                    delay: 1
                },
                type: "POST",
                success: self.executeCallback
            })
        }

        this.executeCallback = function(data) {
            callback(data, parameters);
        };
    }
    console.log("Created Module.AjaxInterface");
})(jQuery, this, Module);

// Inbox Module.
// -------------
// This module deals with everything related to inbox: deleting,
// retrieving, classifying mails...
/*----------------------------------------------------------- */
(function($, window, Module) {
    // module definition
    Module.Modules.Inbox = (function() {
        return {
            getMessages: function(params) {
                var parameters = params || {};
                params = {
                    successCallback: this.pretendRender,
                    successCallbackParameters: parameters,
                    json: params.json
                };
        ...