JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-gallery">
   <ul>
     <li class="active" data-filter="*"><a href="#fex1">All</a></li>
     <li data-filter="Branding"><a href="#fex2">Branding</a></li>
     <li data-filter="Print Desig" value="blue"><a href="#fex3">Print Design</a></li>
     <li data-filter="Branding"><a href="#fex4">Web Design</a></li>
     <li data-filter="Print Desig"><a href="#fex5">Advertising</a></li>
     <li data-filter="Print Desig"><a href="#fex4">Photography</a></li>
   </ul>
 </div>
 <!--nav-gallery-->
 <div class="gallery">
   <div class="gallery-image" data-fgdfgr="Branding">1
     <img src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="About Image" class="img-res">
     <div class="tile-content">
       <h4>GHbdfa</h4>
     </div>
   </div>

   <div class="gallery-image blue" data-fgdfgr="Branding">2
     <img src="http://cupcake.nilssonlee.se/wp-content/uploads/2015/06/IMG_2169.jpg" alt="About Image" class="img-res">
   </div>

   <div class="gallery-image" data-fgdfgr="Print Desig">3
     <img src="http://cupcake.nilssonlee.se/wp-content/uploads/2015/06/IMG_2169.jpg" alt="About Image" class="img-res">
   </div>
   <div class="gallery-image" data-fgdfgr="Print Desig">4
     <img src="http://cupcake.nilssonlee.se/wp-content/uploads/2015/06/IMG_2169.jpg" alt="About Image" class="img-res">
   </div>

 </div>

CSS

.nav-gallery {
  padding: 0px 10% 0px 10%;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.nav-gallery ul {
  margin-bottom: 0px;
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0px -20% 0px -20%;

}

.nav-gallery li {
  padding: 0px 0px;
  margin: 0px 10px;
}

.nav-gallery li a {
  background-color: transparent;
  position: relative;
  display: inline-block;
  color: #888;
  text-transform: uppercase;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  white-space: nowrap;
  padding: 5px 10px;
  overflow: visible;


}

.nav-gallery li:not(.active):hover a {
  /* transition: .5s;  Плавный переход */
  transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  background: #dedede;

}



.gallery {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;

}

.gallery-image {
  position: relative;
  -webkit-flex-basis: 25%;
  flex-basis: 25%;
  overflow: hidden;
  display: inline-block;
  background-color: #000;
  transition: 1.2s ease-in;
   opacity: 1;
}

.gallery-image img {
  width: 100%;
  /* height: 100%; */
  height: auto;
  display: inline-block;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;


}

.gallery-image .tile-content {
  position: absolute;
  bottom: 10px;
  left: 0px;
  z-index: 1;
  color: #fff;
  font-size: 1.2rem;
  visibility: hidden;
  transition: 0.2s ease-in;
}

.active {
  background-color: #50C9C3;
  cursor: default;
  left: 70px;

}


.active a {
  color: #fff !important;
  border-radius: 5px;
}

.gallery-image .adfdve {
 	transition: 0.3s ease-in-out;
   opacity: 0;
   transform: perspective(0px) rotate3d(180,-45,0,-135deg);
}
.ad {
 	transition: 0.3s ease-in-out;
   opacity: 1;
   transform: perspective(900px) rotate3d(0,45,0,-135deg);
}

JavaScript

let nav = document.querySelectorAll('.nav-gallery li');


let gallery = document.querySelectorAll('.gallery-image'); // картинк


for (let i = 0; i < nav.length; i++) {
  nav[i].addEventListener('click', d );
  
function d(){
    toggle(i); 
  }
  
}

function toggle(i) { // i — при вызове будет получать переданный номер  //

  let active = document.querySelector('.nav-gallery li.active');
  
  if( i == 0 ){ // Если кликнули на первую кнопку
  for( let j = 0; j < gallery.length; j++ ){
  
   active.classList.remove('active');
    nav[i].classList.add('active');
    
     gallery[j].classList.add('adfdve');
    // gallery[j].style.opacity = "1";
    setTimeout( function(){
    gallery[j].style.display = "inline-block";
    }, 300);
  }

  return; // Прерывает дальнейшее выполнение функции
}

  active.classList.remove('active');
  nav[i].classList.add('active');
 

  let cache = nav[i].dataset.filter.split(" "); 
  
  for (let j = 0; j < gallery.length; j++) {
    let imgFilterProp = gallery[j].dataset.fgdfgr.split(" ");
   
    for( let k = 0; k < cache.length; k++ ){
      if( imgFilterProp.includes( cache[k] ) ){
        
    
    
     setTimeout( function(){
     gallery[j].style.display = "inline-block";
     
     }, 500);
     
        setTimeout( function(){
      gallery[j].classList.add('ad');
        gallery[j].classList.remove ('adfdve'); 
     }, 500);
      
     
      } else {
      
  
        setTimeout( function(){
        gallery[j].style.display = "none";
        }, 500);
        
         setTimeout( function(){
      gallery[j].classList.remove('ad');
       gallery[j].classList.add ('adfdve'); 
     }, 500);
        
      }
    }
  }
}