HorizontalTab.tsx

import { Tab } from "@headlessui/react";
import type { VFC } from "react";
import { Fragment } from "react";

type Props = {
  items: { label: string; content: JSX.Element }[];
};

export const HorizontalTab: VFC<Props> = (props) => {
  return (
    <Tab.Group>
      <Tab.List className="flex gap-x-1 border-b">
        {props.items.map((item) => {
          return (
            <Tab key={item.label} as={Fragment}>
              {({ selected }) => {
                return (
                  <div className={selected ? "text-red-500" : ""}>
                    {item.label}
                  </div>
                );
              }}
            </Tab>
          );
        })}
      </Tab.List>

      <Tab.Panels className="mt-4">
        {props.items.map((item) => {
          return (
            <Tab.Panel key={item.label} as={Fragment}>
              {item.content}
            </Tab.Panel>
          );
        })}
      </Tab.Panels>
    </Tab.Group>
  );
};