JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<div class="container">
    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">
          Tab 1 Title
        </li>
        <li class="tab-link" data-tab="tab-2">
          Tab 2 Title
        </li>
    </ul>

    <div id="tab-1" class="tab-content current">
       Some Content
    </div>
    
     <div id="tab-2" class="tab-content">
       Some Content 2
    </div>
</div>

CSS

.container{
    margin: 0 auto;
}

ul.tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.tabs li{
    background: none;
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

ul.tabs li.current{
    background: #ededed;
    color: #222;
}

.tab-content{
    display: none;
    background: #ededed;
    padding: 15px;
}

.tab-content.current{
    display: inherit;
}

JavaScript

jQuery(document).ready(function($) {
  $(".tabs li").each(function() {
    $(this).on("click", function() {
      var tab_id = $(this).attr('data-tab');

      $('.tabs .tab-link.current').removeClass('current');
      $('.tab-content.current').removeClass('current');

      $(this).addClass('current');
      $("#" + tab_id).addClass('current');
    });
  });
});