JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
  <ul id="menu">
    <li><a href="#0" tab="0">三角鐵</a></li>
    <li><a href="#1" tab="1">木魚</a></li>
    <li><a href="#2" tab="2">嗩吶</a></li>
  </ul>
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">三角鐵</a></li>
      <li><a href="#tabs-2">木魚</a></li>
      <li><a href="#tabs-3">嗩吶</a></li>
    </ul>
    <div id="tabs-1">
      <p>三角鐵</p>
    </div>
    <div id="tabs-2">
      <p>木魚</p>
    </div>
    <div id="tabs-3">
    <p>嗩吶</p>
    </div>
  </div>
</div>

JavaScript

$(function() {
  $( "#tabs" ).tabs();
  $( "#menu" ).menu();
  $('#menu li a').click(function()
  {
	var num = $(this).attr('tab');	  
	$( "#tabs" ).tabs( "option", "active", num );

  });
});