This repository has been archived on 2024-04-04. You can view files and clone it, but cannot push or open issues or pull requests.
tailwindui/react/components/marketing/sections/faq-sections/three_columns.jsx
2024-01-24 19:02:44 +08:00

37 lines
1.4 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

const faqs = [
{
id: 1,
question: "What's the best thing about Switzerland?",
answer:
"I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
// More questions...
]
export default function Example() {
return (
<div className="bg-white">
<div className="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
<h2 className="text-2xl font-bold leading-10 tracking-tight text-gray-900">Frequently asked questions</h2>
<p className="mt-6 max-w-2xl text-base leading-7 text-gray-600">
Have a different question and cant find the answer youre looking for? Reach out to our support team by{' '}
<a href="#" className="font-semibold text-indigo-600 hover:text-indigo-500">
sending us an email
</a>{' '}
and well get back to you as soon as we can.
</p>
<div className="mt-20">
<dl className="space-y-16 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-16 sm:space-y-0 lg:grid-cols-3 lg:gap-x-10">
{faqs.map((faq) => (
<div key={faq.id}>
<dt className="text-base font-semibold leading-7 text-gray-900">{faq.question}</dt>
<dd className="mt-2 text-base leading-7 text-gray-600">{faq.answer}</dd>
</div>
))}
</dl>
</div>
</div>
</div>
)
}