/* This example requires Tailwind CSS v2.0+ */
import { Disclosure } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/outline'

const faqs = [
  {
    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...
]

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

export default function Example() {
  return (
    <div className="bg-gray-50">
      <div className="max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto divide-y-2 divide-gray-200">
          <h2 className="text-center text-3xl font-extrabold text-gray-900 sm:text-4xl">Frequently asked questions</h2>
          <dl className="mt-6 space-y-6 divide-y divide-gray-200">
            {faqs.map((faq) => (
              <Disclosure as="div" key={faq.question} className="pt-6">
                {({ open }) => (
                  <>
                    <dt className="text-lg">
                      <Disclosure.Button className="text-left w-full flex justify-between items-start text-gray-400">
                        <span className="font-medium text-gray-900">{faq.question}</span>
                        <span className="ml-6 h-7 flex items-center">
                          <ChevronDownIcon
                            className={classNames(open ? '-rotate-180' : 'rotate-0', 'h-6 w-6 transform')}
                            aria-hidden="true"
                          />
                        </span>
                      </Disclosure.Button>
                    </dt>
                    <Disclosure.Panel as="dd" className="mt-2 pr-12">
                      <p className="text-base text-gray-500">{faq.answer}</p>
                    </Disclosure.Panel>
                  </>
                )}
              </Disclosure>
            ))}
          </dl>
        </div>
      </div>
    </div>
  )
}

/* This example requires Tailwind CSS v2.0+ */
const faqs = [
  {
    question: 'How do you make holy water?',
    answer:
      'You boil the hell out of it. 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='max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-20 lg:px-8'>
        <div className='lg:grid lg:grid-cols-3 lg:gap-8'>
          <div>
            <h2 className='text-3xl font-extrabold text-gray-900'>Frequently asked questions</h2>
            <p className='mt-4 text-lg text-gray-500'>
              Can’t find the answer you’re looking for? Reach out to our{' '}
              <a href='#' className='font-medium text-blue-600 hover:text-blue-500'>
                customer support
              </a>{' '}
              team.
            </p>
          </div>
          <div className='mt-12 lg:mt-0 lg:col-span-2'>
            <dl className='space-y-12'>
              {faqs.map((faq) => (
                <div key={faq.question}>
                  <dt className='text-lg leading-6 font-medium text-gray-900'>{faq.question}</dt>
                  <dd className='mt-2 text-base text-gray-500'>{faq.answer}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>
    </div>
  );
}

/* This example requires Tailwind CSS v2.0+ */
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-gray-50">
        <div className="max-w-7xl mx-auto py-12 px-4 divide-y divide-gray-200 sm:px-6 lg:py-16 lg:px-8">
          <h2 className="text-3xl font-extrabold text-gray-900">Frequently asked questions</h2>
          <div className="mt-8">
            <dl className="divide-y divide-gray-200">
              {faqs.map((faq) => (
                <div key={faq.id} className="pt-6 pb-8 md:grid md:grid-cols-12 md:gap-8">
                  <dt className="text-base font-medium text-gray-900 md:col-span-5">{faq.question}</dt>
                  <dd className="mt-2 md:mt-0 md:col-span-7">
                    <p className="text-base text-gray-500">{faq.answer}</p>
                  </dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>
    )
  }
  

/* This example requires Tailwind CSS v2.0+ */
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="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-extrabold text-gray-900 text-center">Frequently asked questions</h2>
          <div className="mt-12">
            <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3">
              {faqs.map((faq) => (
                <div key={faq.id}>
                  <dt className="text-lg leading-6 font-medium text-gray-900">{faq.question}</dt>
                  <dd className="mt-2 text-base text-gray-500">{faq.answer}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>
    )
  }
  

/*
This example requires Tailwind CSS v2.0+ 

This example requires some changes to your config:

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    // ...
    require('@tailwindcss/typography'),
  ]
}
*/
export default function Example() {
return (
  <div className="py-16 xl:py-36 px-4 sm:px-6 lg:px-8 bg-white overflow-hidden">
    <div className="max-w-max lg:max-w-7xl mx-auto">
      <div className="relative z-10 mb-8 md:mb-2 md:px-6">
        <div className="text-base max-w-prose lg:max-w-none">
          <h2 className="leading-6 text-blue-600 font-semibold tracking-wide uppercase">
            Transactions
          </h2>
          <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
            A better way to send money
          </p>
        </div>
      </div>
      <div className="relative">
        <svg
          className="hidden md:block absolute top-0 right-0 -mt-20 -mr-20"
          width={404}
          height={384}
          fill="none"
          viewBox="0 0 404 384"
          aria-hidden="true"
        >
          <defs>
            <pattern
              id="95e8f2de-6d30-4b7e-8159-f791729db21b"
              x={0}
              y={0}
              width={20}
              height={20}
              patternUnits="userSpaceOnUse"
            >
              <rect
                x={0}
                y={0}
                width={4}
                height={4}
                className="text-gray-200"
                fill="currentColor"
              />
            </pattern>
          </defs>
          <rect
            width={404}
            height={384}
            fill="url(#95e8f2de-6d30-4b7e-8159-f791729db21b)"
          />
        </svg>
        <svg
          className="hidden md:block absolute bottom-0 left-0 -mb-20 -ml-20"
          width={404}
          height={384}
          fill="none"
          viewBox="0 0 404 384"
          aria-hidden="true"
        >
          <defs>
            <pattern
              id="7a00fe67-0343-4a3c-8e81-c145097a3ce0"
              x={0}
              y={0}
              width={20}
              height={20}
              patternUnits="userSpaceOnUse"
            >
              <rect
                x={0}
                y={0}
                width={4}
                height={4}
                className="text-gray-200"
                fill="currentColor"
              />
            </pattern>
          </defs>
          <rect
            width={404}
            height={384}
            fill="url(#7a00fe67-0343-4a3c-8e81-c145097a3ce0)"
          />
        </svg>
        <div className="relative md:bg-white md:p-6">
          <div className="lg:grid lg:grid-cols-2 lg:gap-6">
            <div className="prose prose-blue prose-lg text-gray-500 lg:max-w-none">
              <p>
                Ultrices ultricies a in odio consequat egestas rutrum. Ut
                vitae aliquam in ipsum. Duis nullam placerat cursus risus
                ultrices nisi, vitae tellus in. Qui non fugiat aut minus aut
                rerum. Perspiciatis iusto mollitia iste minima soluta id.
              </p>
              <p>
                Erat pellentesque dictumst ligula porttitor risus eget et
                eget. Ultricies tellus felis id dignissim eget. Est augue{" "}
                <a href="#">maecenas</a> risus nulla ultrices congue nunc
                tortor. Eu leo risus porta integer suspendisse sed sit ligula
                elit.
              </p>
              <ol>
                <li>
                  Integer varius imperdiet sed interdum felis cras in nec
                  nunc.
                </li>
                <li>
                  Quam malesuada odio ut sit egestas. Elementum at porta
                  vitae.
                </li>
              </ol>
              <p>
                Amet, eu nulla id molestie quis tortor. Auctor erat justo, sed
                pellentesque scelerisque interdum blandit lectus. Nec viverra
                amet ac facilisis vestibulum. Vestibulum purus nibh ac
                ultricies congue.
              </p>
            </div>
            <div className="mt-6 prose prose-blue prose-lg text-gray-500 lg:mt-0">
              <p>
                Erat pellentesque dictumst ligula porttitor risus eget et
                eget. Ultricies tellus felis id dignissim eget. Est augue
                maecenas risus nulla ultrices congue nunc tortor.
              </p>
              <p>
                Eu leo risus porta integer suspendisse sed sit ligula elit.
                Elit egestas lacinia sagittis pellentesque neque dignissim
                vulputate sodales. Diam sed mauris felis risus, ultricies
                mauris netus tincidunt. Mauris sit eu ac tellus nibh non eget
                sed accumsan. Viverra ac sed venenatis pulvinar elit. Cras
                diam quis tincidunt lectus. Non mi vitae, scelerisque felis
                nisi, netus amet nisl.
              </p>
              <p>
                Eu eu mauris bibendum scelerisque adipiscing et. Justo,
                elementum consectetur morbi eros, posuere ipsum tortor. Eget
                cursus massa sed velit feugiat sed ut. Faucibus eros mauris
                morbi aliquam nullam. Scelerisque elementum sit magna
                ullamcorper dignissim pretium.
              </p>
            </div>
          </div>
          <div className="mt-8 inline-flex rounded-md shadow">
            <a
              href="#"
              className="flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
            >
              Contact sales
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
);
}

/* This example requires Tailwind CSS v2.0+ */
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-blue-700'>
      <div className='max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8'>
        <h2 className='text-3xl font-extrabold text-white'>Frequently asked questions</h2>
        <div className='mt-6 border-t border-blue-300 border-opacity-25 pt-10'>
          <dl className='space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12'>
            {faqs.map((faq) => (
              <div key={faq.id}>
                <dt className='text-lg leading-6 font-medium text-white'>{faq.question}</dt>
                <dd className='mt-2 text-base text-blue-200'>{faq.answer}</dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </div>
  );
}

/* This example requires Tailwind CSS v2.0+ */
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="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
          <div className="max-w-2xl lg:mx-auto lg:text-center">
            <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
              Frequently asked questions
            </h2>
            <p className="mt-4 text-gray-500">
              Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.
              Urna, sed a lectus elementum blandit et.
            </p>
          </div>
          <div className="mt-20">
            <dl className="space-y-10 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-10">
              {faqs.map((faq) => (
                <div key={faq.id}>
                  <dt className="font-semibold text-gray-900">{faq.question}</dt>
                  <dd className="mt-3 text-gray-500">{faq.answer}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>
    )
  }
  

/* This example requires Tailwind CSS v2.0+ */
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-gray-900">
        <div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
          <div className="lg:max-w-2xl lg:mx-auto lg:text-center">
            <h2 className="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">Frequently asked questions</h2>
            <p className="mt-4 text-gray-400">
              Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.
              Urna, sed a lectus elementum blandit et.
            </p>
          </div>
          <div className="mt-20">
            <dl className="space-y-10 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-10">
              {faqs.map((faq) => (
                <div key={faq.id}>
                  <dt className="font-semibold text-white">{faq.question}</dt>
                  <dd className="mt-3 text-gray-400">{faq.answer}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>
    )
  }