3 Tailwind FAQ components for React

This article focuses on a ready-to-use and SEO Friendly 3 variants of FAQ components built with React and Tailwind CSS. What makes this component SEO-friendly is that we collapse only the height of the text, ensuring all content remains accessible to search engines.

React and Tailwind CSS make it easy to create functional and visually appealing components. You can copy and paste the code to speed up your development process and deliver an elegant FAQ section for your apps effortlessly.

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.
2. The FAQ component accepts items (FAQ data) as props.

Standard FAQ

React Tailwind Standard 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 AccordionProps {
10  items: Item[]
11}
12
13const Accordion: React.FC<AccordionProps> = ({ items }) => {
14  const [activeIndex, setActiveIndex] = useState<number[]>([])
15
16  const toggleAccordion = (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="mx-auto max-w-4xl px-3">
30      <div className="mb-8 text-center">
31        <h1 className="mb-2 text-3xl font-bold">F.A.Q</h1>
32        <p className="text-lg font-semibold text-gray-600">
33          Questions on your mind? We've got the answers you need.
34        </p>
35      </div>
36      {items.map((item, index) => (
37        <div key={index} className="mb-3 rounded-2xl border border-gray-300 p-4 hover:bg-slate-50">
38          <button
39            onClick={() => toggleAccordion(index)}
40            className="flex w-full items-center justify-between focus:outline-none">
41            <h4 className="flex-1 text-left text-lg font-semibold">{item.title}</h4>
42            <ChevronDown
43              className={`h-6 w-6 transition-transform ${
44                activeIndex.includes(index) ? 'rotate-180 transform' : ''
45              }`}
46            />
47          </button>
48
49          <div
50            className={`${activeIndex.includes(index) ? 'mt-3 grid-rows-[1fr]' : 'grid-rows-[0fr]'} grid transition-all duration-300`}>
51            <p className="overflow-hidden text-base font-medium">{item.content}</p>
52          </div>
53        </div>
54      ))}
55    </section>
56  )
57}
58
59export default Accordion

Simple Accordion FAQ

React Tailwind Accordion FAQ Component Code

Copy
1import { MinusIcon, PlusIcon } from 'lucide-react'
2import { 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 | null>(null)
15
16  const toggleFaq = (index: number) => {
17    setActiveIndex((prevActiveIndex) => {
18      const indexExists = prevActiveIndex === index
19
20      if (indexExists) {
21        return null
22      }
23
24      return index
25    })
26  }
27
28  return (
29    <section className="mx-auto grid max-w-6xl grid-cols-1 gap-4 p-4 md:grid-cols-[550px_1fr] md:gap-14 md:p-8">
30      <h2 className="text-center text-4xl font-bold text-gray-600 md:text-left md:text-6xl">
31        Frequently asked questions
32      </h2>
33
34      <div>
35        {items.map(({ title, content }, idx) => (
36          <div
37            key={idx}
38            onClick={() => toggleFaq(idx)}
39            className="flex cursor-pointer items-start gap-4 border-b border-gray-300 py-5 last:border-0">
40            <div className="mt-0.5">
41              {idx === activeIndex ? <MinusIcon color="#047857" /> : <PlusIcon color="#047857" />}
42            </div>
43
44            <div>
45              <h4 className="text-lg font-medium">{title}</h4>
46              <div
47                className={`${idx === activeIndex ? 'grid grid-rows-[1fr]' : 'grid grid-rows-[0fr]'}  transition-all duration-300`}>
48                <p className="mt-2 overflow-hidden text-left text-gray-700">{content}</p>
49              </div>
50            </div>
51          </div>
52        ))}
53      </div>
54    </section>
55  )
56}
57
58export default Faq

Tailwind Grid FAQ

React Grid FAQ Component Code

Copy
1interface Item {
2  title: string
3  content: string
4}
5
6interface FaqProps {
7  items: Item[]
8}
9
10const Faq: React.FC<FaqProps> = ({ items }) => (
11  <section className="mx-auto max-w-6xl p-4 md:p-8">
12    <div className="mb-8">
13      <h2 className="text-4xl font-medium text-slate-600 md:text-left md:text-5xl">
14        Frequently asked questions
15      </h2>
16      <p className="mt-4 max-w-lg text-gray-600">Questions in your mind!</p>
17    </div>
18
19    <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
20      {items.map(({ title, content }, idx) => (
21        <div
22          key={idx}
23          className="flex cursor-pointer items-start gap-4 rounded-2xl border border-slate-400 p-4 md:p-6">
24          <div>
25            <h4 className="mb-2 text-lg font-medium text-gray-700">{title}</h4>
26
27            <p className="overflow-hidden text-left text-gray-600">{content}</p>
28          </div>
29        </div>
30      ))}
31    </div>
32  </section>
33)
34
35export 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

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

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.