JSFiddle - React, Tailwind, and code Playground

by Rejith R Krishnan

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js"></script>
<section id="portfolio">
    <div class="container">
        <div class="center">
             <h2>Products</h2>

            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                <br>et dolore magna aliqua. Ut enim ad minim veniam</p>
        </div>
        <ul class="portfolio-filter text-center">
            <li><a class="btn btn-default " href="#" data-filter="*">All Works</a>
            </li>
            <li><a class="btn btn-default" href="#" data-filter=".bootstrap">Creative</a>
            </li>
            <li><a class="btn btn-default" href="#" data-filter=".html">Photography</a>
            </li>
            <li><a class="btn btn-default active" href="#" data-filter=".wordpress">Web Development</a>
            </li>
        </ul>
        <!--/#portfolio-filter-->
        <div class="row">
            <div class="portfolio-items">
                <div class="portfolio-item apps col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item1.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                 <h3><a href="#">Business theme</a></h3>

                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p> <a class="preview" href="images/portfolio/full/item1.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>

                            </div>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->
                <div class="portfolio-item joomla bootstrap col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img...

JavaScript

// portfolio filter
var $portfolio_selectors = $('.portfolio-filter >li>a');
var $portfolio = $('.portfolio-items');
$portfolio.isotope({
    itemSelector: '.portfolio-item',
    layoutMode: 'fitRows',
    filter: '.bootstrap'
});

$portfolio_selectors.on('click', function () {
    $portfolio_selectors.removeClass('active');
    $(this).addClass('active');
    var selector = $(this).attr('data-filter');
    $portfolio.isotope({
        filter: selector
    });
    return false;
});