Collapsible FAQ Accordion Section with Tailwind

<div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
          <h2 class="text-3xl sm:text-4xl tracking-tight font-semibold">Frequently Asked Questions</h2>
          <div class="mt-6 grid gap-4 md:grid-cols-2">
            <!-- Item -->
            <div class="rounded-2xl ring-1 shadow-sm bg-black ring-zinc-800" style="">
              <button class="w-full flex faq-toggle pt-3 pr-4 pb-3 pl-4 items-center justify-between">
                <span class="text-sm font-medium text-left">How do I start uploading videos?</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-up" class="lucide lucide-chevron-up lucide-chevron-down h-5 w-5 text-zinc-400" style=""><path d="m18 15-6-6-6 6"></path></svg>
              </button>
              <div class="px-4 pb-4">
                <p class="text-sm text-zinc-400" style="">Create a free account, verify your email, then drag-and-drop files from your desktop or import from a link.</p>
              </div>
            </div>
            <div class="rounded-2xl ring-1 shadow-sm bg-black ring-zinc-800" style="">
              <button class="w-full flex items-center justify-between px-4 py-3 faq-toggle">
                <span class="text-sm font-medium text-left">Is it free to join?</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down h-5 w-5 text-zinc-400" style=""><path d="m6 9 6 6 6-6"></path></svg>
              </button>
              <div class="px-4 pb-4 hidden">
                <p class="text-sm text-zinc-400" style="">Yes. You can upload and publish for free. Paid plans unlock advanced analytics and higher limits.</p>
              </div>
            </div>
            <div class="rounded-2xl ring-1 shadow-sm bg-black ring-zinc-800" style="">
              <button class="w-full flex items-center justify-between px-4 py-3 faq-toggle">
                <span class="text-sm font-medium text-left">Can I upload in 4K or HDR?</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down h-5 w-5 text-zinc-400" style=""><path d="m6 9 6 6 6-6"></path></svg>
              </button>
              <div class="px-4 pb-4 hidden">
                <p class="text-sm text-zinc-400" style="">Absolutely. We transcode to multiple qualities including 4K with HDR passthrough for supported devices.</p>
              </div>
            </div>
            <div class="rounded-2xl ring-1 shadow-sm bg-black ring-zinc-800" style="">
              <button class="w-full flex items-center justify-between px-4 py-3 faq-toggle">
                <span class="text-sm font-medium text-left">How and when do I get paid?</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down h-5 w-5 text-zinc-400" style=""><path d="m6 9 6 6 6-6"></path></svg>
              </button>
              <div class="px-4 pb-4 hidden">
                <p class="text-sm text-zinc-400" style="">Payouts run weekly to your connected account once you cross the minimum threshold.</p>
              </div>
            </div>
            <div class="rounded-2xl ring-1 shadow-sm bg-black ring-zinc-800" style="">
              <button class="w-full flex items-center justify-between px-4 py-3 faq-toggle">
                <span class="text-sm font-medium text-left">What content is allowed?</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down h-5 w-5 text-zinc-400" style=""><path d="m6 9 6 6 6-6"></path></svg>
              </button>
              <div class="px-4 pb-4 hidden">
                <p class="text-sm text-zinc-400" style="">Original videos you own the rights to. See our community guidelines for details.</p>
              </div>
            </div>
            <div class="rounded-2xl ring-1 shadow-sm bg-black ring-zinc-800" style="">
              <button class="w-full flex items-center justify-between px-4 py-3 faq-toggle">
                <span class="text-sm font-medium text-left">Do I get analytics for my videos?</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down h-5 w-5 text-zinc-400" style=""><path d="m6 9 6 6 6-6"></path></svg>
              </button>
              <div class="px-4 pb-4 hidden">
                <p class="text-sm text-zinc-400" style="">Yes. Track views, watch time, retention, and revenue by source in real time.</p>
              </div>
            </div>
          </div>
        </div>