JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs js-tabs" data-pane=".js-tab-pane1" data-item=".js-tab-item1">
  <ul>
    <li class="tab-item js-tab-item1">1</li>
    <li class="tab-item js-tab-item1">2</li>
    <li class="tab-item js-tab-item1">3</li>
    <li class="tab-item js-tab-item1">4</li>
    <li class="tab-item js-tab-item1">5</li>
  </ul>
  <div class="tab-pane js-tab-pane1">1</div>
  <div class="tab-pane js-tab-pane1">
    <div class="tabs js-tabs" data-pane=".js-tab-pane" data-item=".js-tab-item">
      <ul>
        <li class="tab-item js-tab-item">a</li>
        <li class="tab-item js-tab-item">b</li>
        <li class="tab-item js-tab-item">c</li>
      </ul>
      <div class="tab-pane js-tab-pane">a</div>
      <div class="tab-pane js-tab-pane">b</div>
      <div class="tab-pane js-tab-pane">c</div>
    </div>
    
  </div>
  <div class="tab-pane js-tab-pane1">3</div>
  <div class="tab-pane js-tab-pane1">4</div>
  <div class="tab-pane js-tab-pane1">5</div>
</div>

CSS

.tab-pane {
  display: none;
  background: #ccc;
}

.tab-pane.active {
  display: block;
}

.tab-item {
  cursor: pointer;
}

.tabs .tabs .tab-pane {
  background: #ff0000;
}

JavaScript

$(".js-tabs").each(function() {
    var tabs = $(this),
    tab_item = $(tabs.data('item'), tabs),
		tab_pane = $(tabs.data('pane'), tabs),
    tab_event = tabs.data("event");
    tab_pane.eq(0).add(tab_item.eq(0)).addClass("active").siblings().removeClass("active");
    if (tab_event == "hover") {
			tab_item.hover(function() {
				var index = $(this).index();
				tab_pane.eq(tab_item).add(tab_pane.eq(index)).addClass("active").siblings().removeClass("active")
			});
    } else {
    	tab_item.click(function() {
				var index = $(this).index();
				tab_pane.eq(tab_item).add(tab_pane.eq(index)).addClass("active").siblings().removeClass("active")
			});
    }
});