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 React project.
import {
Tabs,
TabsHeader,
TabsBody,
Tab,
TabPanel,
} from "@material-tailwind/react";
export default function Example() {
const data = [
{
label: "HTML",
value: "html",
desc: `It really matters and then like it really doesn't matter.
What matters is the people who are sparked by it. And the people
who are like offended by it, it doesn't matter.`,
},
{
label: "React",
value: "react",
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Vue",
value: "vue",
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
{
label: "Angular",
value: "angular",
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Svelte",
value: "svelte",
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
];
return (
<Tabs value="html">
<TabsHeader>
{data.map(({ label, value }) => (
<Tab key={value} value={value}>
{label}
</Tab>
))}
</TabsHeader>
<TabsBody>
{data.map(({ value, desc }) => (
<TabPanel key={value} value={value}>
{desc}
</TabPanel>
))}
</TabsBody>
</Tabs>
);
}You can modify the open/close state animation for TabsBody component using the animate prop.
import {
Tabs,
TabsHeader,
TabsBody,
Tab,
TabPanel,
} from "@material-tailwind/react";
export default function Example() {
const data = [
{
label: "HTML",
value: "html",
desc: `It really matters and then like it really doesn't matter.
What matters is the people who are sparked by it. And the people
who are like offended by it, it doesn't matter.`,
},
{
label: "React",
value: "react",
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Vue",
value: "vue",
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
{
label: "Angular",
value: "angular",
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Svelte",
value: "svelte",
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
];
return (
<Tabs id="custom-animation" value="html">
<TabsHeader>
{data.map(({ label, value }) => (
<Tab key={value} value={value}>
{label}
</Tab>
))}
</TabsHeader>
<TabsBody
animate={{
mount: { y: 0 },
unmount: { y: 250 },
}}
>
{data.map(({ value, desc }) => (
<TabPanel key={value} value={value}>
{desc}
</TabPanel>
))}
</TabsBody>
</Tabs>
);
}