JSFiddle - React, Tailwind, and code Playground

by joshua_young_design

HTML

Filter by:

<ul id="filters">

  <li><a href="" data-category="fruit" class="btn">Fruit</a></li>
  <li><a href="" data-category="veg" class="btn">Veg</a>
  </li>
  <li><a href="" data-category="nuts" class="btn">Nuts</a>
  </li>
  <li><a href="" data-category="drink" class="btn">Drinks</a>
  </li>

</ul>
<div id="products">

  <div class="fruit veg nuts drink">Product 1</div>
  <div class="drink">Product 2</div>
  <div class="veg nuts drink">Product 3</div>
  <div class="veg nuts">Product 4</div>

</div>

CSS

.active {
  background: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.btn {
  border: none;
  background: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 3px;
  font-family: Arial;
  color: #ffffff;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  margin: 5px;
}

JavaScript

$("#filters a").click(function() {
  var category = $(this).data("category");
  $("#products div").hide();
  $("#products div." + category).show();
  return false;
});