JSFiddle - React, Tailwind, and code Playground

HTML

<section class="main-features">
    <ul id="tabs" class="tabs menu">
	    <li><a data-toggle=".features" class="active">Caractéristiques</a></li>
        <li><a data-toggle=".mdl-accessoires">Accessoires disponibles</a></li>
        <li><a data-toggle=".files">Fichiers Téléchargeables</a></li>
    </ul>
    
    <div class="contenu">
        
        <article id="features" class="features active">
            <h1>Caractéristiques</h1> 
        </article>
        
        <article class="mdl-accessoires" id="mdl-accessoires">
            <h1>Accessoires disponibles</h1>
        </article>
        
        <article id="files" class="files">
            <h1>Fichiers Téléchargeable</h1>
        </article>
    </div>
</section>

CSS

#tabs a.active { background-color: #0f0; }

section.main-features > div.contenu > article {
    background: rgb(219, 219, 219);
}

.contenu article { display:none; }
.contenu article.active { display:block; }

JavaScript

jQuery(function($){
    
	// On peut à la rigueur gérer l'activation du 1er onglet et du 1er contenu en JS
    // plutôt qu'en HTML (pour ceux qui n'aurait pas javscript d'activé)
    //$('#tabs li:first a, .contenu article:first').addClass('active');
		
    var $tabs = $('#tabs a');
    
    $tabs.click(function(e){
        e.preventDefault();
        
        var selected = $(this).attr('data-toggle');
        
        $tabs.removeClass('active');
        $(this).addClass('active');
        $(selected).addClass('active').siblings().removeClass('active');
    })
})