JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
        <button id='all'>All</button>
<button id='btn-animal'>animal</button>
<button id='btn-city'>city</button>
<button id='btn-nature'>nature</button>
<input class="textfield filter__search js-shuffle-search" type="search" id="filters-search-input"><button onclick="search()">Szuk</button>
<div class="row my-shuffle-container">
  <div class="col-4@sm picture-item column" data-groups='["animal","city"]' data-date-created="2016-08-12" data-title="Crocodile">
    <div class="aspect aspect--16x9">
      <div class="aspect__inner">
        <img src="https://images.unsplash.com/photo-1493585552824-131927c85da2?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=6ef0f8984525fc4500d43ffa53fe8190" alt="A close, profile view of a crocodile looking directly into the camera" />
      </div>
    </div>
  </div>
  <div class="col-4@sm picture-item column" data-groups='["city"]' data-date-created="2016-06-09" data-title="Crossroads">
    <div class="aspect aspect--16x9">
      <div class="aspect__inner">
        <img src="https://images.unsplash.com/photo-1467348733814-f93fc480bec6?ixlib=rb-0.3.5&auto=format&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=284&h=160&fit=crop&s=c7e6f790e22b5e61c2a757ead9c34759" alt="A multi-level highway stack interchange in Puxi, Shanghai" />
      </div>
    </div>
  </div>
  <div class="col-4@sm picture-item column" data-groups='["nature"]' data-date-created="2015-10-20" data-title="Central Park">
    <div class="aspect aspect--16x9">
      <div class="aspect__inner">
        <img...

CSS

/* quick grid */
.container {
    width: 93%;
    margin: auto;
  }
  
  /* Bootstrap-style columns */
  .column {
    position: relative;
    float: left;
    min-height: 1px;
    width: 25%;
    padding-left: 4px;
    padding-right: 4px;
    
    /* Space between tiles */
    margin-top: 8px;
  }
  
  .col-span {
    width: 50%;
  }
  
  .my-sizer-element {
    width: 8.33333%;
  }
  
  /* default styles so shuffle doesn't have to set them (it will if they're missing) */
  .my-shuffle {
    position: relative;
    overflow: hidden;
  }
  
  /* Ensure images take up the same space when they load */
  /* https://vestride.github.io/Shuffle/images */
  .aspect {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
  }
  
  .aspect__inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  .aspect--16x9 {
    padding-bottom: 56.25%;
  }
  
  .aspect--9x80 {
    padding-bottom: calc(112.5% + 8px);
  }
  
  .aspect--32x9 {
    padding-bottom: calc(28.125% - 3px);
  }
  
  img {
    display: block;
    width: 100%;
    
    max-width: none;
    height: 100%;
    object-fit: cover;
  }
  
  /* Small reset */
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  
  figure {
    margin: 0;
    padding: 0;
  }
  figure:nth-child(2n){
    margin-bottom:30px;
  } 
  figure:nth-child(2n+1){
    margin-top:30px;
  }

JavaScript

var Shuffle = window.Shuffle;
var element = document.querySelector('.my-shuffle-container');
var sizer = element.querySelector('.my-sizer-element');

var shuffleInstance = new Shuffle(element, {
  itemSelector: '.picture-item',
  sizer: sizer // could also be a selector: '.my-sizer-element'
});
// shuffleInstance.filter('animal');
$("#all").on("click", function(){
   shuffleInstance.filter();
});
$("#btn-animal").on("click", function(){
   shuffleInstance.filter('animal');
});
$("#btn-city").on("click", function(){
   shuffleInstance.filter('city');
});
$("#btn-nature").on("click", function(){
   shuffleInstance.filter('nature');
});





function search(){
    var searchText = document.getElementById("filters-search-input").value.toLowerCase();
    shuffleInstance.filter(function (element, shuffle) {
        var titleElement = element.querySelector('.picture-item__title');
        var titleText = titleElement.textContent.toLowerCase().trim();
    
        return titleText.indexOf(searchText) !== -1;
      });
}