JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <ul class="nav nav-tabs" id="tabsId">
        <li data-tab-content="some-id1"><a href="#">Name</a></li>
        <li data-tab-content="some-id2"><a href="#">Name</a></li>
        <li data-tab-content="some-id3"><a href="#">Name</a></li>
    </ul>
    <div id="tabsContentId">
        
        <div class="tab-content" data-tab-content="some-id1">{{Content1}}</div>
        <div class="tab-content" data-tab-content="some-id2">{{Content2}}</div>
        <div class="tab-content" data-tab-content="some-id3">{{Content3}}</div>
    </div>
</div>

CSS

.tab-content { display: none; }

JavaScript

$(function() {
        
        $("#tabsId").on("click", "li", function(evt) {
    
            evt.preventDefault();
            var id = $(this).data("tabContent");
            $("#tabsContentId")
            .find(".tab-content[data-tab-content='" + id + "']").show()
            .siblings().hide();
        });
    });