Tailwind Faq Components in Zanrly library

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-gray-900 overflow-hidden border border-gray-800 rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-dark w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative mb-10 md:max-w-xl mx-auto text-center">
        <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Frequently asked questions</span>
        <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Got questions? We’re here to help!</h2>
        <p class="text-gray-400 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
      </div>
      <div class="relative max-w-3xl mx-auto">
        <div class="flex flex-wrap -m-3 mb-10">
          <div class="w-full p-3">
            <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="block p-10 bg-gray-800 rounded-3xl cursor-pointer">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="font-heading text-xl text-white font-black">Do you provide any free plan?</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                      <p class="text-gray-400 font-bold mt-4">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                    <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                        <svg class="text-gray-700" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9207 8.17993L11.6907 8.17993H6.08072C5.12072 8.17993 4.64073 9.33993 5.32073 10.0199L10.5007 15.1999C11.3307 16.0299 12.6807 16.0299 13.5107 15.1999L15.4807 13.2299L18.6907 10.0199C19.3607 9.33993 18.8807 8.17993 17.9207 8.17993Z" fill="currentColor"></path>
                        </svg>
                    </span>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-3">
            <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="block p-10 bg-gray-800 rounded-3xl cursor-pointer">
                <div class="flex flex-wrap -m-2">
                  <div class="flex-1 p-2">
                    <h3 class="font-heading text-xl text-white font-black">How to claim your 25% discount offer?</h3>
                    <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                        <p class="text-gray-400 font-bold mt-4">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
                    </div>
                  </div>
                  <div class="w-auto p-2">
                      <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                          <svg class="text-gray-700" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M17.9207 8.17993L11.6907 8.17993H6.08072C5.12072 8.17993 4.64073 9.33993 5.32073 10.0199L10.5007 15.1999C11.3307 16.0299 12.6807 16.0299 13.5107 15.1999L15.4807 13.2299L18.6907 10.0199C19.3607 9.33993 18.8807 8.17993 17.9207 8.17993Z" fill="currentColor"></path>
                          </svg>
                      </span>
                  </div>
                </div>
              </div>
          </div>
          <div class="w-full p-3">
            <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="block p-10 bg-gray-800 rounded-3xl cursor-pointer">
                <div class="flex flex-wrap -m-2">
                  <div class="flex-1 p-2">
                    <h3 class="font-heading text-xl text-white font-black">What’s your refund policy?</h3>
                    <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                        <p class="text-gray-400 font-bold mt-4">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
                    </div>
                  </div>
                  <div class="w-auto p-2">
                      <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                          <svg class="text-gray-700" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M17.9207 8.17993L11.6907 8.17993H6.08072C5.12072 8.17993 4.64073 9.33993 5.32073 10.0199L10.5007 15.1999C11.3307 16.0299 12.6807 16.0299 13.5107 15.1999L15.4807 13.2299L18.6907 10.0199C19.3607 9.33993 18.8807 8.17993 17.9207 8.17993Z" fill="currentColor"></path>
                          </svg>
                      </span>
                  </div>
                </div>
              </div>
          </div>
          <div class="w-full p-3">
            <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="block p-10 bg-gray-800 rounded-3xl cursor-pointer">
                <div class="flex flex-wrap -m-2">
                  <div class="flex-1 p-2">
                    <h3 class="font-heading text-xl text-white font-black">How to get support for the product?</h3>
                    <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                        <p class="text-gray-400 font-bold mt-4">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
                    </div>
                  </div>
                  <div class="w-auto p-2">
                      <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                          <svg class="text-gray-700" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M17.9207 8.17993L11.6907 8.17993H6.08072C5.12072 8.17993 4.64073 9.33993 5.32073 10.0199L10.5007 15.1999C11.3307 16.0299 12.6807 16.0299 13.5107 15.1999L15.4807 13.2299L18.6907 10.0199C19.3607 9.33993 18.8807 8.17993 17.9207 8.17993Z" fill="currentColor"></path>
                          </svg>
                      </span>
                  </div>
                </div>
              </div>
          </div>
        </div>
        <p class="text-gray-400 font-bold text-center">
          <span>Still have any questions?</span>
          <a class="text-blue-500 hover:text-blue-600" href="#">Contact us</a>
        </p>
      </div>
    </div>
  </div>
</section>