JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Portfolio</h1>

<div id="filters"><a href="#/category/portfolio/" class="filter" data-filter="*"><span class="button">Tout</span></a><a href="#/category/portfolio/" class="filter" data-filter=".Mobile"><span class="button">Mobile</span></a> <a href="#/category/portfolio/" class="filter" data-filter=".Programmation"><span class="button">Programmation</span></a> <a href="#/category/portfolio/" class="filter" data-filter=".Web"><span class="button">Web</span></a> </div>

<div id="contener"></div>

CSS

h1{
  margin-bottom:15px;  
}

a.filter{
    text-decoration:none;
}
.button {
    color: white;
    padding: 8px 14px 10px;
    background-color: #DE0052;
    border: none;
    margin-right: 25px;
    position: relative;
    -webkit-user-select: none;
    -webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
    -moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

.button:active { position: relative; top: 3px;
    -webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
    box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
}

JavaScript

$('#filters a').click(function(){
        $("#contener").append("<p>works!</p>");
        return false;
    });