JSFiddle - React, Tailwind, and code Playground

Me Fav Fiddles

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="list-group">
    <a href="#" class="list-group-item active">
        <strong>Me Fav Fiddles</strong>
        <span class="badge">
            <strong id="count"></strong>
        </span>
    </a>
    <a href="http://jsfiddle.net/jenniferperrin/cfycL3r7/" target="_blank" class="list-group-item sticky">
        <i class="fa fa-code"></i> Bootstrap/Font Awesome Base
        <small>Bootstrap v3.3.1 / Font Awesome 4.2.0</small>
        <span class="badge">Forkable Base</span>
    </a>
    <!-- -------------------------------------------------- -->

    <a href="http://jsfiddle.net/jenniferperrin/sunmzLao/" target="_blank" class="list-group-item">
        <i class="fa fa-code"></i> Comments - Left/Right
        <small>Alternating Comment boxes with Avatars</small>
        <span class="badge">12.16.2014</span>
    </a>
    <a href="http://jsfiddle.net/jenniferperrin/h92uLx2f/" target="_blank" class="list-group-item">
        <i class="fa fa-code"></i> CSS Status/Step Track
        <small>Using flex sizing</small>
        <span class="badge">12.16.2014</span>
    </a>
    <a href="http://jsfiddle.net/jenniferperrin/Ly16ukxv/" target="_blank" class="list-group-item">
        <i class="fa fa-code"></i> Flat Log In/Create Account Form
        <span class="badge">12.16.2014</span>
    </a>
    <a href="http://jsfiddle.net/jenniferperrin/auby8877/" target="_blank" class="list-group-item">
        <i class="fa fa-code"></i> Single input 3D form
        <small>From http://thecodeplayer.com/walkthrough/single-input-3d-form</small>
        <span class="badge">12.16.2014</span>
    </a>
    <a href="http://jsfiddle.net/jenniferperrin/9qqa631r/"...

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);

* { border-radius: 0 !important; }

html, body {
  color: #444444;
  font-family:'Open Sans';
}

.list-group-item {
    background-color: #fff;
    border: 1px solid #ddd;
    display: block;
    margin-bottom: -1px;
    padding: 5px;
    position: relative;
    font-size: 13px;
}
.list-group-item.active { background: #4679bd; padding-left: 10px; }
.list-group-item.sticky { background: #dcdcdc; border-bottom: 2px #cccccc solid; }
.list-group-item strong { letter-spacing: 1px; text-transform: uppercase; }
.list-group-item .badge { 
    text-transform: uppercase; 
    font-weight: 300;
    background: #dcdcdc;
    color: #666666;
}
.list-group-item i { margin-right: 6px; }
.list-group-item small { color: #999999; margin-left: 6px; }

JavaScript

$(document).ready(function () {
    countEm = $(".list-group .list-group-item").size();
    countEm--;
    
    $("#count").text(countEm+' of \'em')
});