Tabs
The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.Default tabs
Use the following default tabs component example to show a dynamic content in your webpage. If your tab title is a simple string set the `title` property on `TabItem`, otherwise when more control is needed overwrite the `title` slot. The last tab in that example shows not only how to show a disabled tab, but how to use the `title` slot entry as well.-
Profile: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tabs with underline
You can control the style of tabs component by settings the `activeClasses` and `inactiveClasses` on the `TabItem` elements. See the `Custom style` section below for more details. However tabs component comes with several pre-defined styles that are accessible to you by setting the `tabStyle` property. This will set the `activeClasses` and `inactiveClasses` properties for you. Use the `tabStyle="underline"` to achieve this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.-
Profile: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tabs with icons
This is an example of the tabs component where you can also use a SVG powered icon to complement the text within the navigational tabs. Use icon components for a simple syntax. See Icons for more details.-
Profile: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Pills tabs
If you want to use pills as a style for the tabs component use `tabStyle="pill"`.-
Profile: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Full width tabs
If you want to show the tabs on the full width relative to the parent element use `tabStyle="full"` prop.-
Profile: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Components in tab contents
You can add other components to the `TabItem` component. Here we are adding a timeline component in the tab 1:-
-
Application UI code in Tailwind CSS
Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-
Application UI code in Tailwind CSS
All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.
-
Application UI code in Tailwind CSS
Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
-