JSFiddle - React, Tailwind, and code Playground

by Adrien Joly

HTML

<ul>
        <li>
            <a id="all">Voir tout</a>  
            <a id="list1">Tee shirts</a>  
            <a id="list2">Pulls</a>  
            <a id="list3">Manteaux</a>  
        </li>
    </ul>
<section>
    <div class="main">
        <article class="list1 item">
            <div class="grid">
                <h3>Croc tops</h3>
            </div>
        </article>
        <article class="list3 item">
            <div class="grid">
                <h3>Vestes</h3>
            </div>
        </article>
        <article class="list3 item">
            <div class="grid">
                <h3>Doudounes</h3>
            </div>
        </article>
        <article class="list2 item">
            <div class="grid">
                <h3>Cashemire</h3>
            </div>
        </article>
        <article class="list1 item">
            <div class="grid">
                <h3>Col V</h3>
            </div>
        </article>
        <article class="list2 item">
            <div class="grid">
                <h3>Laine</h3>
            </div>
        </article>
        <article class="list3 item">
            <div class="grid">
                <h3>Coupes vent</h3>
            </div>
        </article>
        <article class="list2 item">
            <div class="grid">
                <h3>Pulls longs</h3>
            </div>
        </article>
        <article class="list1 item">
            <div class="grid">
                <h3>notre sélection</h3>
            </div>
        </article>
        <article class="list3 item">
            <div class="grid">
                <h3>Manteaux longs</h3>
            </div>
        </article>
</section>

CSS

.hidden {
    display: none;
}

.show {
    display: inline-block;
}

div{
    padding-top: 100px;
}

html,body {
    font-family: 'Roboto';
    text-align: center;
    margin: 0;
    background-color: pink;
    color: pink;
}

p {
    margin: 2% 0;
    font-size: 1em;
}

ul {
    position: absolute;
    list-style-type: none;
    margin: 0 10%;
    padding: 0;
    width: 80%;
    z-index: 99;

}

h2 {
  
    font-size: 3em;
    padding: 5% 0;
    margin: 0;
}

h3 {
  
    font-size: 2em;
     margin: 0;
}

a {

    font-size: 2em;
    text-decoration: none;
    padding: 0 5%;
   
}

a:hover {
    font-weight: bold;
    color: black; 
    cursor: pointer;

}

li {
    background-color: white;
    margin: 0;
    padding: 0.5%;
}

section {
    margin: 2% 10%;
    background-color: white;
}


article{
    display: inline-block;

}

.item {

    margin: 5%;
}

JavaScript

(function () {
  var allButton = document.getElementById('all'); 
  var list1Button = document.getElementById('list1'); 
  var list2Button = document.getElementById('list2');
  var list3Button = document.getElementById('list3');
          
  var showItems = function (items) {
    for (var i=0; i<items.length; i++) {
      items[i].style.display = "inline-block";
    }
  };
  var hideItems = function (items) {
    for (var i=0; i<items.length; i++) {
      items[i].style.display = "none";
    }
  };

  list1Items = document.getElementsByClassName('list1');
  list2Items = document.getElementsByClassName('list2');
  list3Items = document.getElementsByClassName('list3');
            
  allButton.onclick = function() {
    showItems(list1Items);
    showItems(list2Items);
    showItems(list3Items);
  };
  list1Button.onclick = function() {
    showItems(list1Items);
    hideItems(list2Items);
    hideItems(list3Items);
    };
  list2Button.onclick = function() {
    hideItems(list1Items);
    hideItems(list3Items);
    showItems(list2Items);
    };
  list3Button.onclick = function() {
    hideItems(list1Items);
    hideItems(list2Items);
    showItems(list3Items);
    };
  })();