React Tailwind CSS FAQ Component

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.

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

The FAQ Component UI looks like this

React Tailwind CSS FAQ Component Code

Copy
1import { ChevronDown } from 'lucide-react'
2import React, { useState } from 'react'
3
4interface Item {
5  title: string
6  content: string
7}
8
9interface FaqProps {
10  items: Item[]
11}
12
13const Faq: React.FC<FaqProps> = ({ items }) => {
14  const [activeIndex, setActiveIndex] = useState<number[]>([])
15
16  const toggleFaq = (index: number) => {
17    setActiveIndex((prevActiveIndex) => {
18      const indexExists = prevActiveIndex.includes(index)
19
20      if (indexExists) {
21        return prevActiveIndex.filter((activeIdx) => activeIdx !== index)
22      }
23
24      return [...prevActiveIndex, index]
25    })
26  }
27
28  return (
29    <section className="max-w-4xl mx-auto px-3">
30      <div className="mb-8 text-center">
31        <h3 className="text-3xl font-bold mb-2">F.A.Q</h3>
32        <p className="text-lg text-gray-600 font-semibold">
33          Questions on your mind? We've got the answers you need.
34        </p>
35      </div>
36      {items.map(({ title, content }, index) => (
37        <div
38          key={index}
39          className="border border-gray-300 mb-3 rounded-2xl p-4 hover:bg-slate-50"
40        >
41          <button
42            onClick={() => toggleFaq(index)}
43            className="flex justify-between w-full items-center focus:outline-none"
44          >
45            <h4 className="flex-1 text-lg text-left font-semibold">{title}</h4>
46            <ChevronDown
47              className={`w-6 h-6 transition-transform ${
48                activeIndex.includes(index) ? 'transform rotate-180' : ''
49              }`}
50            />
51          </button>
52          {activeIndex.includes(index) && (
53            <div className="mt-3">
54              <p className="text-base">{content}</p>
55            </div>
56          )}
57        </div>
58      ))}
59    </section>
60  )
61}
62
63export 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?

Copy
1export const Faqs = [
2  {
3    title: 'What is LearnNow?',
4    content:
5      'LearnNow is a platform where you can find a variety of online and offline courses suitable for learners of all levels.',
6  },
7  {
8    title: 'How do I use LearnNow?',
9    content:
10      '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.',
11  },
12  {
13    title: 'How can I list my courses on LearnNow?',
14    content:
15      'To list your courses on LearnNow, you can fill out a submission form on our website or contact us via email at info@email.com.',
16  },
17  {
18    title: "What is LearnNow's responsibility for listed courses?",
19    content:
20      '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.',
21  },
22]

How to Use the FAQ Component with a Parent Component

Copy
1import Faq from './components/Faq'
2
3function App() {
4  return <Faq items={Faqs} />
5}
6
7export 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.