JSFiddle - React, Tailwind, and code Playground

by Tamil Selvan

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<button>Name</button>
<div class="container-fluid">
    <div class="row">
        <div class="span4">
             <h2 class="name">Q</h2>

        </div>
        <div class="span4">
             <h2 class="name">W</h2>

        </div>
        <div class="span4">
             <h2 class="name">E</h2>

        </div>
        <div class="span4">
             <h2 class="name">R</h2>

        </div>
        <div class="span4">
             <h2 class="name">T</h2>

        </div>
        <div class="span4">
             <h2 class="name">Y</h2>

        </div>
        <div class="span4">
             <h2 class="name">U</h2>

        </div>
        <div class="span4">
             <h2 class="name">I</h2>

        </div>
        <div class="span4">
             <h2 class="name">O</h2>

        </div>
        <div class="span4">
             <h2 class="name">P</h2>

        </div>
        <div class="span4">
             <h2 class="name">A</h2>

        </div>
        <div class="span4">
             <h2 class="name">S</h2>

        </div>
        <div class="span4">
             <h2 class="name">D</h2>

        </div>
    </div>
</div>

CSS

.span4:nth-child(3n+2) {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.span4:nth-child(3n+1) {
    padding-left: 0;
}
.span4:nth-child(3n+3) {
    padding-right: 0;
}
.span4 {
    text-align:center;
    margin: 0 0 1em 0;
}

JavaScript

$(function () {
    $container = $('.row');
    $container.isotope({
        itemSelector: '.span4',
        layoutMode: 'fitRows',
        getSortData: {
            name: '.name'
        }
    });

    $('button').click(function () {
        $container.isotope({
            sortBy: 'name'
        });
    });

});