Basic tab component working, however, without handling of active tab.

HowToUse.tsx

<Tabs>
      <Tab title="Aba 1">
          Primeira aba
      </Tab>
      <Tab title="Aba 2">
          Segunda aba
      </Tab>
      <Tab title="Aba 3" onTabChange={()=>{console.log('Vc clicou na aba 3')}}>
          Terceira aba
      </Tab>
  </Tabs>

Tab.tsx

import React from 'react';

type Props = {
  title: string,
  onTabChange?:() => void,
}

const Tab: React.FC<Props> = ({ children }) => {
  return <div className="p-2 rounded-lg border-b border-l border-r border-t border-gray-200">{children}</div>
}

export default Tab;

Tabs.tsx

import React, { ReactElement, useState } from "react";
import TabTitle from "./TabTitle";

type Props = {
  children: ReactElement[]
}

// exemplo: https://flowbite.com/docs/components/tabs/#
    //https://medium.com/weekly-webtips/create-basic-tabs-component-react-typescript-231a2327f7b6

const Tabs: React.FC<Props> = ({ children }) => {
  const [selectedTab, setSelectedTab] = useState(0)

  return (
    <div className="mb-4 ">
      <ul className="flex flex-wrap -mb-px text-sm font-medium text-center">
        {children.map((item, index) => (
          <TabTitle
            key={index}
            title={item.props.title}
            index={index}
            setSelectedTab={setSelectedTab}
            onTabChange={item.props.onChange}
          />
        ))}
      </ul>
      {children[selectedTab]}
    </div>
  )
}

export default Tabs

TabTitle.tsx

import React, { ReactElement, useCallback, useState } from "react";

type Props = {
  title: string
  index: number
  setSelectedTab: (index: number) => void,
  onTabChange?:() => void,
}

const TabTitle: React.FC<Props> = ({ title, setSelectedTab, index, onTabChange}) => {

  const nonSelectedTabCss="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-blue-300 dark:hover:text-gray-300";
    const selectedTabCss="inline-block p-4 rounded-t-lg border-b-2 border-transparent text-blue-600 "+
        "hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-400 border-blue-600 dark:border-blue-500";
  
  const [cssTab, setCssTab] = useState<string>(nonSelectedTabCss);

  const onClick = useCallback(() => {
    setSelectedTab(index);
    setCssTab(selectedTabCss);

    if(onTabChange){
      onTabChange;
    }
  }, [setSelectedTab, index]);
  
  return (
    <li className="mr-2" role="presentation">
      <button 
        className={cssTab}
        onClick={onClick} type="button">{title}</button>
    </li>
  )
}

export default TabTitle