JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<div class="filter">
  <h2>FILTER BY OCCASION</h2>
  <div id="filters" class="button-group">
    <button class="filter-button is-checked" data-filter="*">View All</button>
    <button class="filter-button" data-filter=".thank-you">Thank You</button>
    <button class="filter-button" data-filter=".congratulations">Congratulations</button>
    <button class="filter-button" data-filter=".christmas">Christmas</button>
    <button class="filter-button" data-filter="application">Appreciation</button>
    <button class="filter-button" data-filter="i-love-you">I Love You</button>
    <button class="filter-button" data-filter="seasonal">Seasonal</button>
  </div>
</div>

<div class="grid">
  <div class="christmas grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item christmas thank-you"></div>
  <div class="christmas grid-item"></div>
  <div class="christmas grid-item thank-you"></div>
  <div class="grid-item"></div>
  <div class="grid-item thank-you"></div>
  <div class="christmas grid-item"></div>
  <div class="christmas grid-item"></div>
  <div class="christmas grid-item"></div>
  <div class="christmas grid-item"></div>
  <div class="grid-item christmas thank-you"></div>
  <div class="christmas grid-item"></div>
  <div class="christmas grid-item thank-you"></div>
  <div class="grid-item"></div>
  <div class="grid-item thank-you"></div>
  <div class="christmas grid-item"></div>
  <div class="christmas grid-item"></div>
  <div class="christmas grid-item"></div>
  <div class="christmas grid-item"></div>
  <div class="grid-item christmas thank-you"></div>
  <div class="christmas grid-item"></div>
  <div class="christmas grid-item thank-you"></div>
  <div class="grid-item"></div>
  <div class="grid-item thank-you"></div>
  <div class="christmas grid-item"></div>
  <div class="christmas...

CSS

body {
  max-width: 1000px;
  font-size: 16px;
  font-family: 'Source Sans Pro', sans-serif;
  -moz-font-feature-settings: "liga", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.filter {
  margin: 1em 0 3.5em 0;
  text-align: center;
}

.filter h2 {
  margin: 1.5em 0 2em 0;
  letter-spacing: 0.125em;
  color: #7a7a7a;
  font-weight: 600;
  font-size: 15px;
}

.filter-button {
  cursor: pointer;
  width: 9.5em;
  height: 2.625em;
  background: none;
  border: solid 1px #D4D4D4;
}

.filter-button:hover {
  border: solid 1px #864132;
  color: #864132;
  transition: all 0.25s ease-in;
}

.filter-button.is-checked {
  border: solid 1px #864132;
  background: #864132;
  color: white;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid {
  max-width: 1000px;
  background-color: #333;
}

.grid-item {
  position: relative;
  float: left;
  width: 25%;
  height: 12em;
  background-color: #444;
}

.wide {
  background-color: blue !important;
}

.tall {
  background-color: red !important;
}

.grid-item.big {
  background: #fff !important;
  box-shadow: 0 0 0 10px #000 inset;
}

.grid-item.rectangle {
  background: #000 !important;
  box-shadow: 0 0 0 10px #fff inset;
}


/* create big item block */

.matched:nth-of-type(7n) {
  height: 24em;
  width: 50%;
}


/* create rectangle item block */

.matched:nth-of-type(8n) {
  width: 50%;
}

.grid-item:nth-child(10n+0) {
  background: hsl( 0, 100%, 50%);
}

.grid-item:nth-child(10n+1) {
  background: hsl( 36, 100%, 50%);
}

.grid-item:nth-child(10n+2) {
  background: hsl( 72, 100%, 50%);
}

.grid-item:nth-child(10n+3) {
  background: hsl( 108, 100%, 50%);
}

.grid-item:nth-child(10n+4) {
  background: hsl( 144, 100%, 50%);
}

.grid-item:nth-child(10n+5) {
  background: hsl( 180, 100%, 50%);
}

.grid-item:nth-child(10n+6) {
  background: hsl( 216, 100%, 50%);
}

.grid-item:nth-child(10n+7) {
  background: hsl( 252, 100%,...

JavaScript

var grid = $('.grid').isotope({
  layoutMode: 'masonry',
  itemSelector: '.grid-item'
});

// filter functions
var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt(number, 10) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match(/ium$/);
  }
};

$('#filters').on('click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  grid.find('.grid-item').filter(filterFns[filterValue] || filterValue)
    .removeClass('big rectangle')
    .eq(6).addClass('big') // the 7th item
    .nextAll(filterValue).eq(0).addClass('rectangle'); // the 8th item
  grid.isotope({
    filter: filterFns[filterValue] || filterValue
  });
}).find('button').eq(0).trigger('click'); // trigger click on default button to initialize everything.

// change is-checked class on buttons
$('.button-group').each(function(i, buttonGroup) {
  var $buttonGroup = $(buttonGroup);
  $buttonGroup.on('click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $(this).addClass('is-checked');
  });
});