JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card card-2011 card-studio">Studio 2011</div>
<div class="card card-2012 card-house">House 2012</div>
<div class="card card-2013 card-commercial">Commercial 2013</div>
<div class="card card-2012 card-personal">Personal 2012</div>
<div class="card card-2014 card-studio">Studio 2014</div>
<div class="card card-2011 card-commercial">Commercial 2011</div>
<div class="card card-2014 card-house">House 2014 </div>
<div class="card card-2013 card-personal">Personal 2013</div>

<div class="buttons">
  <div class="filter time">
    <a class="button button-2011" data-toggle=".card-2011">2011</a>
    <a class="button button-2012" data-toggle=".card-2012">2012</a>
    <a class="button button-2013" data-toggle=".card-2013">2013</a>
    <a class="button button-2014" data-toggle=".card-2014">2014</a>
    <a class="button button-all button-active" data-toggle="">All time</a>
  </div>

  <div class="filter category">
    <a class="button button-studio" data-toggle=".card-studio">Studio</a>
    <a class="button button-house" data-toggle=".card-house">House</a>
    <a class="button button-commercial" data-toggle=".card-commercial">Commercial</a>
    <a class="button button-personal" data-toggle=".card-personal">Personal</a>
    <a class="button button-all button-active" data-toggle="">All</a>
  </div>
</div>

CSS

a {
  text-decoration: none;
  color: black;
}

.buttons {
  margin-top: 40px;
}

.time {
  margin-bottom: 20px;
}

.card-faded {
  opacity: 0.3;
}

.button-active {
  text-decoration: underline;
}

JavaScript

(function () {
  var active = [];

  $('.filter').each(function (idx, el) {
    var $el = $(el);

    active.push('');

    $el.on('click', '.button', function () {
      var $this = $(this);

      active[idx] = $this.data('toggle');

      $el.find('.button').removeClass('button-active');
      $this.addClass('button-active');

      update();
    });
  });

  function update()
  {
    var a = active.join('');

    if (a.length === 0) {
      $('.card').removeClass('card-faded');
    }
    else {
      $('.card').addClass('card-faded').filter(active.join('')).removeClass('card-faded');
    }
  }
})();