JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Tab 1 </h3>
<strong>(contenu 2 déclaré actif dans le html)</strong>
<div id="ca-container" class="ca-container">
    <div class="ca-wrapper">
        <div class="ca-item"><a href="#view1">Titre 1</a>
        </div>
        <div class="ca-item"><a href="#view2">Titre 2</a>
        </div>
    </div>
    <div class="tabcontents">
        <div id="view1" class="tabcontent">Contenu 1</div>
        <div id="view2" class="tabcontent actif">Contenu 2</div>
    </div>
</div>

<h3>Tab 2</h3>
<strong>(aucun contenu n'est déclaré actif dans le html, le script prend le relais)</strong>
<div id="ca-container-2" class="ca-container">
    <ul class="ca-wrapper">
        <li class="ca-item"><a href="#view11">Titre 1</a>
        </li>
        <li class="ca-item"><a href="#view22">Titre 2</a>
        </li>
    </ul>
    <div class="tabcontents">
        <div id="view11" class="tabcontent">Contenu 1</div>
        <div id="view22" class="tabcontent">Contenu 2</div>
    </div>
</div>

CSS

.ca-container .tabcontents > .tabcontent {
    display : none;
}
.ca-container .tabcontents > .tabcontent.actif {
    display : block;
}
ul.ca-wrapper li.ca-item {
    display: inline;
}
div.ca-wrapper div.ca-item {
    float: left;
    margin-right: 5px;
}
div.tabcontents {
    clear: both;
}

JavaScript

$("div.ca-container").each(function () {

    var _this = $(this),
        _tabMenu = _this.find(".ca-wrapper:first"),
        _tabContainer = _this.find(".tabcontents:first"),
        _links = _tabMenu.find(".ca-item a"),
        _originalActifLink = _links.filter("[href=#" + _tabContainer.find(".actif:first").prop("id") + "]"),
        _actifLink = _originalActifLink.size() > 0 ? _originalActifLink : _links.first();


    _links.click(function (evt) {

        evt.preventDefault();
        _tabContainer.find(".tabcontent")
            .removeClass("actif")
            .filter(this.hash)
            .addClass("actif");

    });
    _actifLink.trigger("click");

});