JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<nav class="filter__navigation">
  <button data-filter="all" type="button" class="filter__title _active">
    <span class="button"> Все результаты </span>
  </button>
  <button data-filter="article-1" type="button" class="filter__title">
    <span class="button">Статьи 1</span>
  </button>
  <button data-filter="article-2" type="button" class="filter__title">
    <span class="button">Статьи 2</span>
  </button>
  <button data-filter="article-3" type="button" class="filter__title">
    <span class="button">Статьи 3</span>
  </button>
</nav>
<div class="search__body">
		<div class="search__column filter-column filter__column_article-1">
							lorem1
		</div>
    	<div class="search__column filter-column filter__column_article-2">
							lorem2
		</div>
    	<div class="search__column filter-column filter__column_article-3">
							lorem3
		</div>
</div>
</div>

<div>
<nav class="filter__navigation">
  <button data-filter="all" type="button" class="filter__title _active">
    <span class="button"> Все результаты </span>
  </button>
  <button data-filter="services-1" type="button" class="filter__title">
    <span class="button">Услуга 1</span>
  </button>
  <button data-filter="services-2" type="button" class="filter__title">
    <span class="button">Услуга 2</span>
  </button>
  <button data-filter="services-3" type="button" class="filter__title">
    <span class="button">Услуга 3</span>
  </button>
</nav>
<div class="search__body">
		<div class="search__column filter-column filter__column_services-1">
							lorem1
		</div>
    	<div class="search__column filter-column filter__column_services-2">
							lorem2
		</div>
    	<div class="search__column filter-column filter__column_services-3">
							lorem3
		</div>
</div>
</div>

CSS

.filter-column._hide{
  display:none;
}

JavaScript

let blogItems = document.querySelectorAll('.filter-column');
if (blogItems.length > 0) {
    let blogFilters = document.querySelectorAll('.filter__title');
    if (blogFilters.length > 0) {
        for (let index = 0; index < blogFilters.length; index++) {
            const blogFilter = blogFilters[index];
            blogFilter.addEventListener("click", function (e) {
                e.preventDefault();
                const blogFilterValue = blogFilter.dataset.filter;
                const blogFilterActive = document.querySelector('.filter__title._active');
                blogFilter.classList.add('_active');

                showBlogItems(blogFilterValue);
            });
        }
        function showBlogItems(filter) {
            for (let index = 0; index < blogItems.length; index++) {
                const blogItem = blogItems[index];
                if (filter === 'all' || !filter) {
                    blogItem.classList.remove('_hide');
                    blogItem.classList.remove('_active');
                } else {
                    blogItem.classList.add('_hide');
                    blogItem.classList.remove('_active');
                    if (blogItem.classList.contains('filter__column_' + filter)) {
                        blogItem.classList.remove('_hide');
                        blogItem.classList.add('_active');
                    }
                }
            }
        }
    }
}