JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="repo">
    <ul class="clearfix">
        <li class="titles">
            <span>name</span>
            <span>age</span>
            <span>message</span>
        </li>
        <li>
            <span><a href="#">README.md</a></span>
            <span>7 days ago</span>
            <span>quick copy edit</span>
        </li>
        <li>
            <span><a href="#">jquery-plugin.js</a></span>
            <span>2 days ago</span>
            <span>fixed semi colon</span>
        </li>
        <li>
            <span><a href="#">jquery-plugin.min.js</a></span>
            <span>n/a</span>
            <span>n/a</span>
        </li>
    </ul>
</div>

CSS

body {
 padding: 5%;   
}
@font-face{
    font-family: "Octicons Regular";
    src: url("https://a248.e.akamai.net/assets.github.com/fonts/octicons/octicons-regular-webfont.eot?639c50d4");
    src: 
                        url("https://a248.e.akamai.net/assets.github.com/fonts/octicons/octicons-regular-webfont.eot?639c50d4#iefix") format("embedded-opentype"), 
                        url("https://a248.e.akamai.net/assets.github.com/fonts/octicons/octicons-regular-webfont.woff?0605b255") format("woff"),
                        url("https://a248.e.akamai.net/assets.github.com/fonts/octicons/octicons-regular-webfont.ttf?f82fcba7") format("truetype"),
                        url("https://a248.e.akamai.net/assets.github.com/fonts/octicons/octicons-regular-webfont.svg?1f7afa21#newFontRegular") format("svg");
                    font-weight: normal;
                    font-style: normal;
                }
        .repo, .repo * { 
                -moz-box-sizing: border-box; 
                -webkit-box-sizing: border-box; 
                box-sizing: border-box; 
                font-family: sans-serif;
                font-size: 13px;
                line-height: 18px;
                display: block;  }
            .repo .clearfix { zoom: 1; }
            .repo .clearfix:before, .repo .clearfix:after { content: ""; display: table; }
            .repo .clearfix:after { clear: both; }
            .repo {
                width: 100%;
                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;
                position: relative;
                color: #555; 
            }
            .repo .loader {
                top: 1px;
                left: 50%;
                margin: 0 0 0 -12px;
                position: absolute;
            }
            .repo ul {
                margin: 0;
                padding: 0;
                border: 1px solid...