Headless UI Tab

Headless ui is providing us the Tab component were we have

1. Tab.Group is the parent its wraps all this present inside it.
2. Tab.list in tab list we have defined our tab and we have selected as active tab.
3. Tab.Panels so tabs panels is the parent of all the Tab.
4. Tab.Panel so tab panel is defined under the Tab.Panels Note: if we have 3 tabs in Tab.list then we need to paced all 3 Tab.Panel in the same like we define tabs in Tab.List

example :

<Tab.Group>
    <Tab.List>
      <Tab
        className={({ selected })} => // apply active class
        key="must_pass_unique_key_1"
      >
        Tab Name 1
      </Tab>
    </Tab.List>

</Tab.Group>