JSFiddle - React, Tailwind, and code Playground

by CarambaMoreno

HTML

<div class="button-group filter-button-group">
  <button data-filter="*">show all</button>
  <button data-filter=".metal">metal</button>
  <button data-filter=".transition">transition</button>
  <button data-filter=".alkali, .alkaline-earth">alkali & alkaline-earth</button>
  <button data-filter=":not(.transition)">not transition</button>
  <button data-filter=".metal:not(.transition)">metal but not transition</button>
</div>

<div class="grid">
  <div class="grid-item metal"><p>esto es lo primero</p><p>hola halfon hola</p><p>hola ejercicios asignas</p><p>hola difference hola</p></div>
  <div class="grid-item grid-item--width2 .alkali, .alkaline-earth"><p>hola ejercicios asignas</p><p>hola ejercicios asignas</p></div>
  <div class="grid-item .alkali, .alkaline-earth"><p>hola ejercicios asignas</p><p>hola hola</p><p>hola ejercicios asignas</p></div>
  <div class="grid-item metal transition"><p>hola ejercicios asignasss</p></div>
  <div class="grid-item .alkali, .alkaline-earth"><p>hola hola</p><p>hola hola</p></div>
  <div class="grid-item transition"><p>hola hola</p><p>hola hola</p><p>hola hola</p><p>hola hola</p><p>hola hola</p></div>
  <div class="grid-item metal"><p>hola hola</p></div>
</div>

CSS

.grid{width:800px; background:pink; height:800px;}
.grid-item { width: 24%; border:1px solid white;}
.grid-item--width2 { width: 50%; background:blue; color:white;}

JavaScript

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});
// filter items on button click
$('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});

$('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});