Tailwind CSS Tabs

Get started on your web project with our responsive Tailwind CSS tabs that create a secondary navigational hierarchy for your website.

Tabs are components that render and display subsections to users. They arrange the content into categories for easy access and a cleaner-looking app.

See below our example that will help you create a simple and easy-to-use tabs for your Tailwind CSS and project.

Tabs with Icons

The tabs component comes with different variants including icons.

Tabs with Content

You can reference a specific content for each tab option, using the data-tab-content data attribute.

Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.

Tabs Data Attributes

The following data attributes are available for tabs.

data-tabsSet the main container for the tabs.
data-tab-targetSet the tab tigger element that when a click happened on it, it's content should be visible.
data-tab-contentSet tab content element.
activeSet default active tab, it should be used for the trigger element where the
data-tab-target is used.

Required Scrips

The tabs component needs a required script files to work, you just need to add the below script file to the bottom of your html file.

<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html/scripts/tabs.js"></script>
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/tabs.js"></script>