JSFiddle - React, Tailwind, and code Playground

HTML

<section class="main-features">
    <ul id="tabs">
	    <li>Caractéristiques</li>
        <li>Accessoires disponibles</li>
        <li>Fichiers Téléchargeables</li>
    </ul>
    <div class="contenu">
        <article>
            <h1>Caractéristiques</h1> 
        </article>
        <article>
            <h1>Accessoires disponibles</h1>
        </article>
        <article>
            <h1>Fichiers Téléchargeable</h1>
        </article>
    </div>
</section>

CSS

#tabs li { cursor:pointer; }
#tabs li.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($){
    
    $('#tabs li:first, .contenu article:first').addClass('active');
		
    var $tabs = $('#tabs li');
    var $articles = $('.contenu article');
    
    $tabs.click(function(){
        $(this).addClass('active').siblings().removeClass('active')
        $articles.eq($(this).index()).addClass('active').siblings().removeClass('active')
    })
})