In this tutorial, we’ll create tabs in React using Tailwind CSS. We’ll explore components for active and inactive tabs, dynamic tabs, and a fully managed, renderless tabs component with Headless UI, Tailwind CSS, and React.
Tool Use
React JS
Tailwind CSS
Headless UI
First you need to setup react project with tailwind css. You can install manually or you read below blog.
How to install Tailwind CSS in React
Install & Setup Vite + React + Typescript + Tailwind CSS 3
Example 1
React JS with tailwind simple tabs using useState hooks.
import { useState } from "react";
export default function TabsComponent() {
const [openTab, setOpenTab] = useState(1);
return (
<div>
<div className="container mx-auto">
<div className="flex flex-col items-center justify-center max-w-xl">
<ul className="flex space-x-2">
<li>
<a
href="#"
onClick={() => setOpenTab(1)}
className="inline-block px-4 py-2 text-gray-600 bg-white rounded shadow"
>
React Tabs 1
</a>
</li>
<li>
<a
href="#"
onClick={() => setOpenTab(2)}
className="inline-block px-4 py-2 text-gray-600 bg-white rounded shadow"
>
React Tabs 2
</a>
</li>
<li>
<a
href="#"
onClick={() => setOpenTab(3)}
className="inline-block px-4 py-2 text-gray-600 bg-white rounded shadow"
>
React Tabs 3
</a>
</li>
</ul>
<div className="p-3 mt-6 bg-white border">
<div className={openTab === 1 ? "block" : "hidden"}>
{" "}
React JS with Tailwind CSS Tab 1 Content show
</div>
<div className={openTab === 2 ? "block" : "hidden"}>
React JS with Tailwind CSS Tab 2 Content show
</div>
<div className={openTab === 3 ? "block" : "hidden"}>
React JS with Tailwind CSS Tab 3 Content show
</div>
</div>
</div>
</div>
</div>
);
}
Example 2
React JS with tailwind active tabs with color effect.
import { useState } from "react";
export default function TabsComponent() {
const [openTab, setOpenTab] = useState(1);
return (
<div>
<div className="container mx-auto mt-12">
<div className="flex flex-col items-center justify-center max-w-xl">
<ul className="flex space-x-2">
<li>
<a
href="#"
onClick={() => setOpenTab(1)}
className={` ${openTab === 1 ? "bg-purple-600 text-white" : ""} inline-block px-4 py-2 text-gray-600 bg-white rounded shadow`}
>
React Tabs 1
</a>
</li>
<li>
<a
href="#"
onClick={() => setOpenTab(2)}
className={` ${openTab === 2 ? "bg-purple-600 text-white" : ""} inline-block px-4 py-2 text-gray-600 bg-white rounded shadow`}
>
React Tabs 2
</a>
</li>
<li>
<a
href="#"
onClick={() => setOpenTab(3)}
className={` ${openTab === 3 ? "bg-purple-600 text-white" : ""} inline-block px-4 py-2 text-gray-600 bg-white rounded shadow`}
>
React Tabs 3
</a>
</li>
</ul>
<div className="p-3 mt-6 bg-white border">
<div className={openTab === 1 ? "block" : "hidden"}>
{" "}
React JS with Tailwind CSS Tab 1 Content show
</div>
<div className={openTab === 2 ? "block" : "hidden"}>
React JS with Tailwind CSS Tab 2 Content show
</div>
<div className={openTab === 3 ? "block" : "hidden"}>
React JS with Tailwind CSS Tab 3 Content show
</div>
</div>
</div>
</div>
</div>
);
}
Example 3
You can use Tabs using headless ui. Headless Ui is a A fully-managed, renderless dialog component jam-packed with accessibility and keyboard features, perfect for building completely custom tabs for your next application.
Install Headless UI
To get started, install Headless UI via npm:
npm install @headlessui/reactTabsComponent.jsx
import { useState } from 'react'
import { Tab } from '@headlessui/react'
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function TabsComponent() {
let [categories] = useState({
Recent: [
{
id: 1,
title: 'Does drinking coffee make you smarter?',
date: '5h ago',
commentCount: 5,
shareCount: 2,
},
{
id: 2,
title: "So you've bought coffee... now what?",
date: '2h ago',
commentCount: 3,
shareCount: 2,
},
],
Popular: [
{
id: 1,
title: 'Is tech making coffee better or worse?',
date: 'Jan 7',
commentCount: 29,
shareCount: 16,
},
{
id: 2,
title: 'The most innovative things happening in coffee',
date: 'Mar 19',
commentCount: 24,
shareCount: 12,
},
],
Trending: [
{
id: 1,
title: 'Ask Me Anything: 10 answers to your questions about coffee',
date: '2d ago',
commentCount: 9,
shareCount: 5,
},
{
id: 2,
title: "The worst advice we've ever heard about coffee",
date: '4d ago',
commentCount: 1,
shareCount: 2,
},
],
})
return (
<div className="w-full max-w-md px-2 py-16 sm:px-0">
<Tab.Group>
<Tab.List className="flex p-1 space-x-1 rounded-xl bg-blue-900/20">
{Object.keys(categories).map((category) => (
<Tab
key={category}
className={({ selected }) =>
classNames(
'w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700',
'ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2',
selected
? 'bg-white shadow'
: 'text-blue-100 hover:bg-white/[0.12] hover:text-white'
)
}
>
{category}
</Tab>
))}
</Tab.List>
<Tab.Panels className="mt-2">
{Object.values(categories).map((posts, idx) => (
<Tab.Panel
key={idx}
className={classNames(
'rounded-xl bg-white p-3',
'ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2'
)}
>
<ul>
{posts.map((post) => (
<li
key={post.id}
className="relative p-3 rounded-md hover:bg-gray-100"
>
<h3 className="text-sm font-medium leading-5">
{post.title}
</h3>
<ul className="flex mt-1 space-x-1 text-xs font-normal leading-4 text-gray-500">
<li>{post.date}</li>
<li>·</li>
<li>{post.commentCount} comments</li>
<li>·</li>
<li>{post.shareCount} shares</li>
</ul>
<a
href="#"
className={classNames(
'absolute inset-0 rounded-md',
'ring-blue-400 focus:z-10 focus:outline-none focus:ring-2'
)}
/>
</li>
))}
</ul>
</Tab.Panel>
))}
</Tab.Panels>
</Tab.Group>
</div>
)
}Example 4
ReactJS dynamic tabs with tailwind css.
import { useState } from "react";
export default function TabsComponent() {
const tabs = [
{ name: "Home", link: "#", content: "Home Content" },
{ name: "About", link: "#", content: "About Content" },
{ name: "Contact", link: "#", content: "Contact Content" },
];
const [openTab, setOpenTab] = useState("Home");
return (
<div>
<div className="container mx-auto">
<div className="flex flex-col items-center justify-center max-w-xl">
<ul className="flex space-x-2">
{tabs.map((tab) => (
<li key={tab.name}>
<a
href={tab.link}
onClick={() => setOpenTab(tab.name)}
className="inline-block px-4 py-2 text-gray-600 bg-white rounded shadow"
>
{tab.name}
</a>
</li>
))}
</ul>
<div className="p-3 mt-6 bg-white border">
{tabs.map((tab) => (
<div
key={tab.name}
className={
tab.name === openTab ? "block" : "hidden"
}
>
{tab.content}
</div>
))}
</div>
</div>
</div>
</div>
);
}
