Create FAQs using Next.js and Tailwind CSS
This tutorial will guide us through building a dynamic FAQ section in a Next.js application. The FAQ section will allow users to click on a question to reveal the corresponding answer, providing a clean and user-friendly interface. We'll use Tailwind CSS for styling, ensuring the component is fully responsive and looks great across all devices.
In this tutorial, we are going to create a Frequently Asked Questions (FAQs) section using Next.js and Tailwind CSS. The goal is to help you understand how to develop a simple, responsive FAQ section with collapsible answers.
Preview Image
Prerequisites
Approach
To create a FAQ section, we use Next.js for the component structure and Tailwind CSS for styling. First, set up the global styles, then build a FAQ component with a collapsible question-answer format using React state. Each FAQ item toggles open and closed, making the user interface interactive and visually appealing.
Steps to Create & Set Up the Project
Step 1: Set up the Next.js project
Run the following command to create a new Next.js project:
npx create-next-app feeds-ui-nextjs
cd feeds-ui-nextjs
Step 2: Install Tailwind CSS
Install Tailwind CSS and its dependencies:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 3: Update globals.css
Create a globals.css file inside the styles folder and include Tailwind directives:
@tailwind base;
@tailwind components;
@tailwind utilities;
Project Structure:
Updated Dependencies:
"dependencies": {
"next": "14.2.14",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"autoprefixer": "^10.4.20",
"eslint": "^8",
"eslint-config-next": "14.2.14",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.13"
}
Example: This example demonstrates the creation of dynamic and responsive FAQs using Next.js and Tailwind CSS.
/*globals.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background-color: #f9fafb;
/* Light gray background */
}
h1 {
color: green;
font-size: 2rem;
font-weight: bold;
}
.faq-container {
max-width: 600px;
margin: auto;
padding: 1.5rem;
}
//page.js
import FAQ from './components/FAQ';
export default function Home() {
return (
<div>
<FAQ />
</div>
);
}
//components/FAQ.js
"use client";
// Add this line to mark the component as a Client Component
import { useState } from 'react';
const FAQItem = ({ question, answer }) => {
const [isOpen, setIsOpen] = useState(false);
const toggleOpen = () => {
setIsOpen(!isOpen);
};
return (
<div className="border-b last:border-b-0 py-4">
<div className="flex justify-between items-center
cursor-pointer" onClick={toggleOpen}>
<h3 className="font-semibold text-lg">{question}</h3>
<svg
className={`w-6 h-6 transform transition-transform
duration-200 ${isOpen ? 'rotate-180' : ''
}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2} d="M12 14l-4-4m0
0l4-4m-4 4h8" />
</svg>
</div>
{isOpen && (
<p className="mt-2 text-gray-600">{answer}</p>
)}
</div>
);
};
const FAQ = () => {
const faqData = [
{
question: "What courses do you offer?",
answer: `We offer a variety of courses
across subjects like programming,
data science, design, and business
management.`,
},
{
question: "How long do the courses take?",
answer: `Course duration varies; some are
completed in a few hours while others
may take several weeks, depending on the
depth of the content.`,
},
{
question: "Are the courses self-paced?",
answer: `Yes, our courses are self-paced,
allowing you to learn at your
own speed and convenience.`,
},
{
question: "Do I receive a certificate upon completion?",
answer: `Yes, upon completing a course, you will
receive a certificate that you can download
and share.`,
},
{
question: "Is there a money-back guarantee?",
answer: `Absolutely! If you are not satisfied
with a course, you can request a full
refund within 30 days of purchase.`,
},
{
question: "Can I access the courses on mobile devices?",
answer: `Yes, our platform is mobile-friendly,
allowing you to access courses on
smartphones and tablets.`,
},
];
return (
<div className="max-w-4xl mx-auto p-4">
<h1 className="text-center mb-4
text-2xl font-bold">
FAQ - EdTech Platform
</h1>
{faqData.map((item, index) => (
<FAQItem key={index}
question={item.question}
answer={item.answer} />
))}
</div>
);
};
export default FAQ;
Now, type the below command to run the application.
npm run devOutput: To see output, open localhost:3000 in your system.
