Coder Wrap provides free to use snippets

/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

* {
 box-sizing: border-box;
}

body {
 font-family: "Poppins", sans-serif;
 color: #444;
 box-sizing: border-box;
 background-color: #f5f5f5;
 margin: 0px;
}

.container {
 max-width: 1480px;
 padding: 0px 15px;
 margin: auto;
}

/**Typeo CSS End**/
.hide {
 animation: hide .2s ease 0s 1 normal forwards;
 transform-origin: center;
}

.show {
 animation: show .2s ease 0s 1 normal forwards;
 transform-origin: center;
}

@keyframes hide {
 0% {
  transform: scale(1);
 }

 100% {
  transform: scale(0);
  width: 0;
  height: 0;
  margin: 0;
 }

}

@keyframes show {
 0% {
  transform: scale(0);
  width: 0;
  height: 0;
  margin: 0;
 }

 100% {
  transform: scale(1);
 }

}



.filters {
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
 margin:20px 0px;
}

.filters .filter {
 margin: 7px;
cursor: pointer;
position: relative;
text-transform: uppercase;
font-weight: 600;
padding: 2px 5px;
}

.filters .filter:before {
 content: '';
 position: absolute;
 bottom: 0px;
 left: 0px;
 width: 0;
 height: 2px;
 background-color: #e63b30;
 display: inline-block;
 transition: 0.5s all;
 -webkit-transition: 0.5s all;
}

.filters .filter:hover, .filters .filter.active {
 color: #e63b30;
}

.filters .filter:hover:before, .filters .filter.active:before {
 width: 100%;
}

.wordslist-main {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.wordslist-main .worditem {
    width: 20%;
}

.wordslist-main .worditem span {
    border: #ccc 1px solid;
    font-size: 18px;
    width: calc(100% - 6px);
    display: flex;
    margin: 3px;
    padding: 6px 15px;
}

const filters = document.querySelectorAll('.filter');
document.querySelector('.filters [data-filter="all"]').classList.add('active');
filters.forEach(filter => {  
 filter.addEventListener('click', function(e) {
 //Active Class Start 
  filters.forEach(e => { 
   e.classList.remove('active')
  })
  filter.classList.add('active');
 //Active Class End
  let selectedFilter = filter.getAttribute('data-filter');
  let itemsToHide = document.querySelectorAll(`.wordslist-main .worditem:not([data-filter='${selectedFilter}'])`);
  let itemsToShow = document.querySelectorAll(`.wordslist-main [data-filter='${selectedFilter}']`);
  if (selectedFilter == 'all') {
    itemsToHide = [];
    itemsToShow = document.querySelectorAll('.wordslist-main [data-filter]');
  }
  
  itemsToHide.forEach(el => {
    el.classList.add('hide');
    el.classList.remove('show');
  });

  itemsToShow.forEach(el => {
    el.classList.remove('hide');
    el.classList.add('show'); 
  });
 });
});