Reactive Tab with daisyUI + tailwind + clsx

daisytab.tsx

import clsx from 'clsx'

export const Page: FC = ({}) => {
  const [activeTab, setActiveTab] = useState(1)

  return (
    <>
      <div className="tabs">
        {['List', 'Favourite', 'Profile'].map((title, index) => (
          <>
            <a
              key={index}
              className={clsx(
                'tab tab-bordered',
                activeTab === index && 'tab-active'
              )}
              onClick={() => setActiveTab(index)}
            >
              {title}
            </a>
          </>
        ))}
      </div>
      <div className={clsx(activeTab != 0 && 'hidden')}>Content 1</div>
      <div className={clsx(activeTab != 1 && 'hidden')}>Content 2</div>
      <div className={clsx(activeTab != 2 && 'hidden')}>Content 3</div>
    </>
  )
}