JSFiddle - React, Tailwind, and code Playground

by William Lima

HTML

<nav class='buttons'>
    <a class='type' id='all'>Todos</a> |
    <a class='type' id='couros'>Couros</a> |
    <a class='type' id='sinteticos'>Sintéticos</a>
</nav>
<div class="produtos-container">
    <div class="imagem couros">1</div>
    <div class="imagem sinteticos">2</div>
    <div class="imagem sinteticos">3</div>
    <div class="imagem couros">4</div>
</div>

CSS

.buttons{padding:20px 0}
.buttons a{cursor:pointer;}
.Bolding{color: red; text-decoration: underline;}
.produtos-container{width: 200px; position: relative;}
.imagem{display: block; float: left;width: 80px; height: 80px; margin: 10px;}
.couros{background: #122145;}
.sinteticos{background: #455123;}

JavaScript

var tipo="all";
    $('a.type').click(function(){
        
        $('a.type').removeClass('Bolding');
        $(this).addClass('Bolding');

        tipo=$(this).attr('id');
        $(".imagem").each(function(){
            if($(this).hasClass(tipo) || tipo=="all"){
                $(this).fadeIn();
            }else{
                $(this).fadeOut();
            }
        })

    })