Tailwind CSS Tabs
David UI's Tabs component provides a dynamic and organized way to display content in switchable sections. Styled with Tailwind CSS, it supports customizable designs, smooth transitions, and responsive layouts for seamless navigation.
Explore our responsive Tabs component examples, styled with Tailwind CSS, perfect for enhancing user engagement in your web or mobile projects.
Basic Tabs
Try this straightforward implementation of the Tabs component featuring multiple tab options. Each tab displays distinct content, making it ideal for organizing and switching between different sections of a page or application.
Tabs with Icon
An enhanced version of the Tabs component that incorporates icons for each tab. Perfect for creating visually appealing and intuitive navigation.
Content for Dashboard.
Vertical Tabs
Use this example of a Tabs component with a vertical orientation. This layout is ideal for side navigation, allowing for clear separation of content while maintaining a structured and responsive design.
Vertical Tabs with Icon
A vertical version of the Tabs component that includes icons alongside the tab labels. This setup is excellent for dashboards and side navigation menus, combining visual cues with usability.
Transparent Tabs
A stylish implementation of the Tabs component with a transparent background. This design is ideal for blending seamlessly into minimalist or clean interfaces, offering smooth transitions and a light visual touch.
Underline Tabs
This variation of the Tabs component features an underlined indicator for the active tab. This design provides a clear, elegant, and modern visual cue to indicate the selected tab, making it a great fit for streamlined navigation menus.
Underline Vertical Tabs
Use this example to build a Tabs component with underline triggers and a subtle colored indicator, perfect for displaying tabs on a white or light-colored background.
Required Script
The Tabs component in david-ai requires JavaScript to handle tab switching and content display. The library provides smooth transitions and interactive behavior through data attributes.
Installation
To use the Tabs component in your project, you first need to install the david-ai library via npm:
Basic Usage
Using with Global Access
If you prefer, you can use the DavidAI global object instead of directly importing initTabs:
Using with CDN
You can include david-ai via a CDN and initialize tabs functionality globally in the browser. Add the following script to your HTML file:
