JSFiddle - React, Tailwind, and code Playground

by jhegeduis

HTML

<!--
HomePage Template:

Template HTML used by the `HomePageView` to render the app's home page.
-->
<script id="t-home" type="text/x-handlebars-template">
    <h1>Contributors of GitHub Projects</h1>
    <p>
        <input id="github-app-username" type="text" value="{{login}}" placeholder="GitHub Username" />
        <button class="yui3-button">Show Repos</button>
    </p>
    <p>
        <label for="github-app-username">(e.g. yui, davglass, rgrove)</label>
    </p>
</script>

<!--
User Template:

Template HTML used by the `UserPageView` to render the header section of a
user's page in the app; this displays info and stats about the GitHub user.
-->
<script id="t-user" type="text/x-handlebars-template">
    <div class="yui3-g">
        <p class="back yui3-u-1-2">
            <a href="#/">« Choose Someone Different</a>
        </p>
        <p class="view-on-github yui3-u-1-2">
            <a href="{{html_url}}">View on GitHub</a>
        </p>
    </div>

    <div class="yui3-g">
        <div class="info yui3-u-2-3">
            <h1>
                <span class="avatar user-avatar">
                    <img src="{{avatar_url}}" alt="{{login}}'s avatar" />
                </span>
                <span class="user-login">{{login}}</span>
            {{#if name}}
                <span class="user-name">({{name}})</span>
            {{/if}}
            </h1>
        </div>
        <div class="stats yui3-u-1-3">
            <ul class="yui3-g">
                <li class="user-repos yui3-u-1-2">
                    <b>{{public_repos}}</b> {{public_repos_label}}
                </li>
                <li class="user-followers yui3-u-1-2">
                    <b>{{followers}}</b> {{followers_label}}
                </li>
            </ul>
        </div>
    </div>
</script>

<!--
RepoList Template:

Template HTML used by the `UserPageView` to render the main section of a user's
page in the app; this displays the list of project repos for the GitHub user.
-->
<script...

CSS

.example {
    padding: 0 !important;
}

/*-- Common Styles -----------------------------------------------------------*/

#github-app h1 {
    padding: 0;
}

#github-app .avatar,
#github-app .avatar img {
    display: block;
    width: 76px;
    height: 76px;
    border: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
#github-app .avatar {
    display: inline-block;
    *display: inline; zoom: 1;
    height: 76px;
    padding: 2px;
}
#github-app .avatar:hover,
#github-app .user-avatar {
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 0 2px rgba(0,0,0,0.25);
    box-shadow: 0 0 2px rgba(0,0,0,0.25);
}

#github-app .back,
#github-app .view-on-github {
    margin-top: 0;
}
#github-app .view-on-github {
    text-align: right;
}

#github-app .info h1 {
    margin: 0;
}
#github-app .info .user-avatar,
#github-app .info .user-login,
#github-app .info .user-name,
#github-app .info .repo-name {
    vertical-align: middle;
}
#github-app .info .user-avatar {
    margin-right: 10px;
}
#github-app .info .user-name {
    font-weight: 400;
}

#github-app .stats ul {
    margin: 0;
    padding: 8px;
    color: #30418C;
    background: #F0F1F8;
    border: 1px solid #D4D8EB;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    list-style: none;
}
#github-app .stats b {
    display: block;
    font-size: 36px;
    line-height: 44px;
}

/*-- HomePage Styles ---------------------------------------------------------*/

#github-app .home-page {
    padding: 1em;
}
#github-app .home-page h1,
#github-app .home-page p {
    display: block;
    text-align: center;
}
#github-app .home-page label,
#github-app .home-page input,
#github-app .home-page button {
    font-size: 20px;
}
#github-app .home-page label {
    color: #A6A6A6;
}
#github-app .home-page input {
    display: inline-block;
    *display: inline; zoom: 1;
    font-family: Helvetica, sans-serif;
   ...

JavaScript

YUI().use('app', 'handlebars', 'jsonp', 'cssbutton', function (Y) {

var User, Repo, RepoList, Contributor, ContributorList,
    UserView, RepoView, RepoListView, ContributorListView,
    HomePageView, UserPageView, RepoPageView,
    ContributorsApp;

    // ... Add the code from the following sections here! ...
    function GithubSync() {}

GithubSync.API_ORIGIN = 'https://api.github.com';

GithubSync.prototype = {
    // Intended to be overridden with a GitHub API endpoint URL.
    githubURL: '/',

    // Can be overridden to customize the actual URL used when making the
    // request; this way the `githubURL` can be more of a template, and this
    // method can substitute place-holders in the template with specific values.
    buildURL: function () {
        return this.githubURL;
    },

    // Provides an implementation for a Model/ModelList's `sync()` method which
    // can read data from GitHub's API.
    sync: function (action, options, callback) {
        Y.Lang.isFunction(callback) || (callback = function () {});

        // Enforce ready-only constraint.
        if (action !== 'read') {
            return callback('Read-only');
        }

        // Creates the API URL and adds params for 100 items per-page and a
        // JSONP callback placeholder.
        var url = this.buildURL() + '?per_page=100&callback={callback}';

        // Performs JSONP request to GitHub's API.
        Y.jsonp(GithubSync.API_ORIGIN + url, function (res) {
            var meta = res.meta,
                data = res.data;

            // Check for a successful response, otherwise return the error
            // message returned by the GitHub API.
            if (meta.status >= 200 && meta.status < 300) {
                callback(null, res);
            } else {
                callback(data.message, res);
            }
        });
    },

    // Provides an implementation for a Model/ModelList's `parse()` method which
    // simply returns the `data` object or array from...