JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div class="dock-container2">
      <a class="dock-item2" href="#" data-section="presentation"><span>Présentation</span></a>
      <a class="dock-item2" href="#" data-section="valeurs"><span>Nos valeurs</span></a>
      <a class="dock-item2" href="#" data-section="trombinoscope"><span>Trombinoscope</span></a>
      <a class="dock-item2" href="#" data-section="calendrier"><span>Calendrier</span></a> 
      <a class="dock-item2" href="#" data-section="idees"><span>Vos idées</span></a> 
      <a class="dock-item2" href="#" data-section="contact"><span>Contact</span></a>
    </div>
</div>

CSS

#content {
    background:#ccc;
    height:100px;
}
#content.presentation {
    background:#ff3300;
}
#content.valeurs {
    background:#999;
}
#content.trombinoscope {
    background:#000;
}
/* etc… */

JavaScript

var content = $("#content");
content.find(".dock-item2").on("click", function(e){
    var currentSection = $(this).data("section");
    content
    .removeClass()
    .addClass(currentSection)
    e.preventDefault();
});