In this tutorial, we will create tabs in react js using tailwind css. We will see tabs component, active and inactive tabs with react, react dynamic tabs. A fully-managed, renderless tabs component with headless ui Tailwind CSS & React.
Tool Use
React JS
Tailwind CSS 3.v
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/react
TabsComponent.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>
);
}
Read Also
React Tailwind CSS Accordion (FAQ) Example
How to use Tailwind CSS 3 with Headless UI In React
Toggle Switch in React JS with Tailwind CSS Example
Create Reusable Button Component with React & Tailwind CSS
React Tailwind CSS Search Bar Example
React Tailwind CSS Sidebar Example
React JS Login Form with Tailwind CSS Example
React Responsive Navbar Menu With Tailwind CSS Example
How to install Tailwind CSS in React
React Tailwind CSS Dialog (Modal) Example
React Tailwind Registration Form Example
React Tailwind CSS Table Example
React Tailwind CSS Responsive Gallery Example