JSFiddle - React, Tailwind, and code Playground

by Alex Viktor

HTML

<section class="latest">
        <div class="ta-c">
            <ul>
                <li><a class="all active">All</a></li>
                <li><a class="design">Web design</a></li>
                <li><a class="mobile">Mobille App</a></li>
                <li><a class="illustration">Illustration</a></li>
                <li><a class="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>
        <div class="ta-c">
            <a href="#" class="button">Load More</a>
        </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;
}

JavaScript

var a = document.querySelectorAll('.latest ul li a');
	var blockList = document.querySelectorAll('.latest-box > div');
	for(var i = 0; i<a.length; i++){
		a[i].addEventListener('click', function () {
            deletedBlock(this, blockList);
            changeClass(this, 'active', a);
        }, false);
	}
	function changeClass(elem, clsName, vrbl) {
		for(var j = 0; j<a.length; j++){
			vrbl[j].classList.remove(clsName)
		}
		elem.classList.add(clsName);
    }
    function deletedBlock(elemFilter, elemList){
        for(var j = 0; j<elemList.length; j++){
            if(elemList[j].classList.contains(elemFilter.classList.value) && !elemFilter.classList.contains('all')){
                elemList[j].style.display = '';
            }
            else if(elemFilter.classList.contains('all')){
                elemList[j].style.display = '';
            }
            else {
                elemList[j].style.display = 'none';
            }
        }
	}