JSFiddle - React, Tailwind, and code Playground

by jzbruno

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/isotope/1.5.21/jquery.isotope.min.js"></script>
<script src="http://cdn.jsdelivr.net/angularjs/1.0.2/angular.min.js"></script>
<section>
    <article>
        <h2>one</h2>
    </article>
    <article>
        <h2>two</h2>
    </article>
    <article>
        <h2>three</h2>
    </article>
</section>

CSS

body { padding: 8px 20%; }
section {
    margin: 0 auto; padding: 8px 0 0 8px; 
    border: 1px solid #ddd; }
section article { 
    margin: 0 8px 8px 0; padding: 4px; 
    border: 1px solid #ddd; }

JavaScript

$('section').isotope({
    itemSelector: 'article',
    layoutMode: 'fitRows',
    getSortData : {
        title: function(e) {
            return e.find('h2').text();
        }
    },
    sortBy: 'title',
    sortAscending: true
});