FAQ Accordion Section with Tailwind CSS

<section class="w-full max-w-6xl mr-auto ml-auto pr-4 pb-10 pl-4">
      <div class="grid md:grid-cols-3 gap-6">
        <div class="md:col-span-1">
          <h3 class="text-xl sm:text-2xl font-semibold tracking-tight">Questions, answered</h3>
          <p class="text-sm text-gray-600 mt-2">Can’t find what you’re looking for? Our team is here to help 24/7.</p>
        </div>
        <div class="md:col-span-2 space-y-3">
          <details class="group rounded-xl bg-white ring-1 ring-black/5 p-4 open:ring-black/10">
            <summary class="flex items-center justify-between cursor-pointer select-none">
              <span class="text-sm font-medium text-gray-900">Can I switch between Monthly and Yearly later?</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down w-4 h-4 text-gray-500 group-open:rotate-180 transition-transform"><path d="m6 9 6 6 6-6" class=""></path></svg>
            </summary>
            <p class="text-sm text-gray-600 mt-3">Yes. You can switch plans anytime. When upgrading to Yearly, we’ll prorate your remaining time automatically.</p>
          </details>
          <details class="group rounded-xl bg-white ring-1 ring-black/5 p-4 open:ring-black/10">
            <summary class="flex items-center justify-between cursor-pointer select-none">
              <span class="text-sm font-medium text-gray-900">Do you offer trials or refunds?</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down w-4 h-4 text-gray-500 group-open:rotate-180 transition-transform"><path d="m6 9 6 6 6-6" class=""></path></svg>
            </summary>
            <p class="text-sm text-gray-600 mt-3">We offer a 14-day free trial on all plans and a 7‑day refund window if things aren’t working out.</p>
          </details>
          <details class="group rounded-xl bg-white ring-1 ring-black/5 p-4 open:ring-black/10">
            <summary class="flex items-center justify-between cursor-pointer select-none">
              <span class="text-sm font-medium text-gray-900">Is the Team price per seat?</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down w-4 h-4 text-gray-500 group-open:rotate-180 transition-transform"><path d="m6 9 6 6 6-6" class=""></path></svg>
            </summary>
            <p class="text-sm text-gray-600 mt-3">Yes. Team pricing is per seat. Volume pricing is available for 25+ seats—contact sales for a tailored quote.</p>
          </details>
        </div>
      </div>
    </section>