headlessui-tabs.js

import { Tab } from "@headlessui/react";

const feature = {
  items: [
    {
      id: 1,
      title: "Title 1",
      description: `Feature <strong>Item 1</strong> description.`,
      image: {
        src: "https://images.unsplash.com/photo-1447078806655-40579c2520d6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYyNTUyODc0MA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080",
        alt: "Image 1 alt",
      },
      link: {
        href: "#",
      },
      tab: {
        name: "Tab 1",
        description: `Tab 1 description`,
      },
    },
    {
      id: 2,
      title: "Title 2",
      description: `Feature <strong>Item 2</strong> description.`,
      image: {
        src: "https://images.unsplash.com/photo-1496116218417-1a781b1c416c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzNDczMDM2OA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080",
        alt: "Image 2 alt",
      },
      link: {
        href: "#",
      },
      tab: {
        name: "Tab 2",
        description: `Tab 2 description`,
      },
    },
    {
      id: 3,
      title: "Title 3",
      description: `Feature <strong>Item 3</strong> description.`,
      image: {
        src: "https://images.unsplash.com/photo-1437750769465-301382cdf094?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&ixlib=rb-1.2.1&q=80&w=1080&utm_source=unsplash_source&utm_medium=referral&utm_campaign=api-credit",
        alt: "Image 3 alt",
      },
      link: {
        href: "#",
      },
      tab: {
        name: "Tab 3",
        description: `Tab 3 description`,
      },
    },
    {
      id: 4,
      title: "Title 4",
      description: `Feature <strong>Item 4</strong> description.`,
      image: {
        src: "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&ixlib=rb-1.2.1&q=80&w=1080&utm_source=unsplash_source&utm_medium=referral&utm_campaign=api-credit",
        alt: "Image 4 alt",
      },
      link: {
        href: "#",
      },
      tab: {
        name: "Tab 4",
        description: `Tab 4 description`,
      },
    },
    {
      id: 5,
      title: "Title 5",
      description: `Feature <strong>Item 5</strong> description.`,
      image: {
        src: "https://images.unsplash.com/photo-1460400408855-36abd76648b9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxhbGx8fHx8fHx8fHwxNjIzMTQyNTE0&ixlib=rb-1.2.1&q=80&w=1080&utm_source=unsplash_source&utm_medium=referral&utm_campaign=api-credit",
        alt: "Image 5 alt",
      },
      link: {
        href: "#",
      },
      tab: {
        name: "Tab 5",
        description: `Tab 5 description`,
      },
    },
  ],
};

export default function Tabs() {
  return (
    <div className="mx-auto max-w-2xl lg:max-w-7xl">
      <Tab.Group>
        <Tab.List>
          {feature.items.map((item) => (
            <Tab key={item.id}>
              {({ selected }) => <div>{item.tab.name}</div>}
            </Tab>
          ))}
        </Tab.List>
        <Tab.Panels>
          {feature.items.map((item) => (
            <Tab.Panel key={item.id}>
              <img src={item.image.src} alt={item.image.alt} />
              <div>{item.title}</div>
              <p dangerouslySetInnerHTML={{ __html: item.description }}></p>
            </Tab.Panel>
          ))}
        </Tab.Panels>
      </Tab.Group>
    </div>
  );
}