tailwind css faq component

React Tailwind CSS FAQ Component

Author Profile
Abdul Basit OnLinkedIn

Recently, Tailwind CSS components have gained significant popularity among developers; developers prefer Tailwind CSS over other CSS frameworks due to its effectiveness. For example, I can use this FAQ component code in any of my apps without worrying about its style file and dependencies.

Why Does Your App Need the FAQ Component and What Problem Does It Solve?

There are likely questions related to your app or software that come to users' minds. It's better to answer these questions in a frequently asked questions (FAQ) section rather than addressing each one individually via support.

FAQ Component Dependencies

  1. This component only depends on the icon library luicide-react. You can download it using the command npm i lucide-react or use any icon library of your choice.

You can also choose from over 200k+ icons from IconBuddy. Save $80 by using the coupon code "CODEVERTISER" on the lifetime deal.

  1. The FAQ component accepts items (FAQ data) as props.

The FAQ Component UI looks like this

React Tailwind Css Faq component ui

React Tailwind CSS FAQ Component Code

import { ChevronDown } from 'lucide-react'
import React, { useState } from 'react'
interface Item {
title: string
content: string
interface FaqProps {
items: Item[]
const Faq: React.FC<FaqProps> = ({ items }) => {
const [activeIndex, setActiveIndex] = useState<number[]>([])
const toggleFaq = (index: number) => {
setActiveIndex((prevActiveIndex) => {
const indexExists = prevActiveIndex.includes(index)
if (indexExists) {
return prevActiveIndex.filter((activeIdx) => activeIdx !== index)
return [...prevActiveIndex, index]
return (
<section className="max-w-4xl mx-auto px-3">
<div className="mb-8 text-center">
<h3 className="text-3xl font-bold mb-2">F.A.Q</h3>
<p className="text-lg text-gray-600 font-semibold">
Questions on your mind? We've got the answers you need.
{items.map(({ title, content }, index) => (
<div key={index} className="border border-gray-300 mb-3 rounded-2xl p-4 hover:bg-slate-50">
onClick={() => toggleFaq(index)}
className="flex justify-between w-full items-center focus:outline-none">
<h4 className="flex-1 text-lg text-left font-semibold">{title}</h4>
className={`w-6 h-6 transition-transform ${
activeIndex.includes(index) ? 'transform rotate-180' : ''
{activeIndex.includes(index) && (
<div className="mt-3">
<p className="text-base">{content}</p>
export default Faq

FAQ Data Structure

The FAQ data is an array of objects; simply replace it with your app's data. Isn't it time saving?

export const Faqs = [
title: 'What is LearnNow?',
'LearnNow is a platform where you can find a variety of online and offline courses suitable for learners of all levels.',
title: 'How do I use LearnNow?',
'LearnNow is a user-friendly platform designed to help individuals in discovering courses that align with their interests and goals. Simply browse through the available courses and enroll in those that you find interesting.',
title: 'How can I list my courses on LearnNow?',
'To list your courses on LearnNow, you can fill out a submission form on our website or contact us via email at [email protected].',
title: "What is LearnNow's responsibility for listed courses?",
'LearnNow serves as a platform for course discovery and does not take responsibility for the quality or content of the courses listed. Users are advised to conduct their own research before enrolling.',

How to Use the FAQ Component with a Parent Component

import Faq from './components/Faq'
function App() {
return <Faq items={Faqs} />
export default App

Feel free to adjust the style and use the code in your app.

If this code helps you in your project, or if you need more components, please let me know via LinkedIn.