JSFiddle - React, Tailwind, and code Playground

HTML

<section class="latest">
  <div class="ta-c">
    <ul class="filter">
      <li><a data-show="all" class="active">All</a></li>
      <li><a data-show="design">Web design</a></li>
      <li><a data-show="mobile">Mobille App</a></li>
      <li><a data-show="illustration">Illustration</a></li>
      <li><a data-show="foto">Photography</a></li>
    </ul>
  </div>
  <div class="latest-box">
    <div class="list mobile">
      <h1>Mobole</h1>
    </div>
    <div class="list foto">
      <h1>Foto</h1>
    </div>
    <div class="list illustration">
      <h1>Illustration</h1>
    </div>
    <div class="list foto">
      <h1>Foto</h1>
    </div>
    <div class="list design">
      <h1>Design</h1>
    </div>
    <div class="list foto">
      <h1>Foto</h1>
    </div>
  </div>
</section>

CSS

h1{
  color:#000;
  font:25px 'Arial';
}
.ta-c {
  text-align: center;
}

.latest ul {
  margin: 40px 0;
}

.latest ul li {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 3px;
}

.latest ul li a {
  font-family:"Arial";
  display: block;
  padding: 10px 27px;
  font-size: 14px;
  font-weight: 400;
  border-radius: 3px;
  box-sizing: border-box;
  border: 1px solid #F2F2F2;
  color: #8c8c8c;
  line-height: 21px;
}

.latest ul li a.active {
  border: 1px solid #998675;
  background: #998675;
  color: #ffffff;
}

.latest ul li a:hover {
  cursor: pointer;
}

.latest .latest-box {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12.5px;
  margin-right: -12.5px;
  justify-content: center;
}

.latest .latest-box .list {
  box-sizing: border-box;
  word-wrap: break-word;
  margin-left: 12.5px;
  margin-right: 12.5px;
  width: calc(33.333333333333336% - 25px);
  margin-top: 12.5px;
  margin-bottom: 12.5px;
  font-size: 0;
}
.latest .button {
  display: inline-block;
  box-shadow: inset 0 -3px 0 #736357;
  border-radius: 3px;
  background-color: #998675;
  padding: 19px 44px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 40px;
  margin-bottom: 80px;
}

.latest .button:hover {
  background: #C7B299;
  box-shadow: none;
}
.list.hide {
  display: none;
}

JavaScript

var filter = document.querySelector('.latest .filter')
var content = document.querySelectorAll('.latest-box > div')

filter.addEventListener('click', function(evt) {
  let clicked = evt.target.closest('a')
  if (clicked) {
    highlight(clicked)
    showByClass(clicked.dataset.show);
  }
}, false);




function showByClass(className) {
  content.forEach(el => {
    let flag = className === 'all' || el.classList.contains(className)
    el.classList.toggle('hide', !flag)
  })
}
function highlight(elem) {
	let active = filter.querySelector('.active')
  if (active) {
    active.classList.remove('active')
  }
  elem.classList.add('active')
}