JSFiddle - React, Tailwind, and code Playground

HTML

<p style="margin-left: 85px;"> <span style="margin-right: 10px; top: 2px;" class="label label-default category-filter" data-category="money">money</span>
 <span style="margin-right: 10px; top: 2px;" class="label category-filter label-default" data-category="holidays">holidays</span>
</p>

<div id="sort_articles" class="select_articles ui-sortable">
    <div class="media article_container" data-categories="holidays">It's your birthday</div>
    <div class="media article_container" data-categories="money">It's about money</div>
</div>

CSS

.label-default {
    background-color: #999;
}
.label-success {
    background-color: green;
}
.label {
    padding: 5px;
    color: white;
    border-radius: 2px;
    font-family: 'Helvetica';
    font-size: 10px;
}

JavaScript

// category filter
  function fadeInFast() {
      $(this).fadeIn('fast')
  }

  function fadeOutFast() {
      $(this).fadeOut('fast')
  }

  $.fn.swapClass = function (oldClass, newClass) {
      return $(this).removeClass(oldClass)
          .addClass(newClass)
          .fadeIn('fast');
  };

  function clearFilter() {
      $('.article_container').each(fadeInFast);
      $(this).swapClass('label-success', 'label-default')
          .click(selectFilter);
  }

  function selectFilter() {
      var category = $(this).attr('data-category');
      $('.category-filter').each(function () {
          if ($(this).attr('data-category').indexOf(category) >= 0) {
              $(this)
                  .swapClass('label-default', 'label-success')
                  .click(clearFilter);
          }
      })
      $('.article_container').each(function () { // fade out articles
          if (!($(this).attr('data-categories').indexOf(category) >= 0)) {
              fadeOutFast();
          }
      })
  }

  $('.category-filter').click(selectFilter);