JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<script src="https://raw.github.com/fitzgen/github-api/master/github.js"></script>

CSS

body { padding: 5%; }

.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }

.repo {
    display: block;
    font-family: sans-serif;
    font-size: 12px;
    width: 95%;
    border: 4px solid rgba(0,0,0,0.1);
    box-shadow: 0 0 1px rgba(0,0,0,1);
    border-radius: 3px;
    margin: 0 0 15px 0;
    padding: 10px;    
    position: relative;
}
.repo .loader {
    top: 1px;
    left: 50%;
    margin: 0 0 0 -12px;
    position: absolute;
}
.repo li {
    width: 95%;
    margin: 0 0 5px 0;
    padding: 0 0 5px 5%;
    float: left;
    display: block;
    border-bottom: 1px solid #ccc;
    background: url(http://darcyclarke.me/work/cinnamon/file.png) no-repeat 0 0;
}
.repo li.dir {
   background: url(http://darcyclarke.me/work/cinnamon/folder.png) no-repeat 0 0;
}
.repo li.back {
    background: none;   
}
.repo li:last-child {
    border: none;
    padding: 0 0 0 5%;
    margin: 0;
}
.repo li a {
    display: block;
    width: 100%;
    line-height: 18px;
    text-decoration: none;
}
.repo li a span {
    white-space: nowrap;
    display: inline-block; 
    height: 18px;
    overflow: hidden;  
    margin: 0 1% 0 0;   
    color: #717171;  
}
.repo li a span:last-child {
    margin: 0;
}
.repo li a .name {
    color: #4183C4;
    width: 20%;    
}
.repo li a .message {
    width: 56%;
}
.repo li a .age {
    width: 20%;    
}

JavaScript

(function(window, $){
    
    $.extend($.fn, {
        github : function(url){
            var init = function(url){
                
                // Store Context
                var ctx = this;
                
                // Setup Container
                ctx.repo = $('<div class="repo clearfix"><img src="http://darcyclarke.me/dev2/cinnamon/loader.gif" class="loader" alt="Loading..."></div>');
                ctx.repo = ctx.repo.appendTo($('body'));
                
                // Retrieve Repo
                ctx.get = function(url, parent){
                    var items = '';
                    ctx.repo.find('ul').hide().end().find('.loader').show();
                    $.ajax({
                        url: 'http://darcyclarke.me/dev2/cinnamon/api.php',
                        data: {url:url},
                        type: 'GET',
                        dataType: 'jsonp',
                        success: function(data){
                            $.each(data.response.repo, function(i, el){
                                items += '<li class="' + this.extension + '"><a href="' + this.link + '"><span class="name">' + this.name + '</span> <span class="message">' + this.message + '</span> <span class="age">' + this.age + '</span></a></li>'; 
                            });
                            items = (typeof parent != 'undefined') ? '<li class="back"><a href="' + parent + '">...</a></li>' + items : items;
                            items = '<ul data-url="' + url + '">' + items + '</ul>'; 
                            ctx.repo.find('.loader')
                                .hide()
                                .end()
                                .append($(items))
                                .find('a')
                                .on('click', function(e){
                                    e.preventDefault();
                                    e.stopPropagation();
                                    var el = $(this),
        ...