Faq Components in Gradia library

<section class="pt-24 pb-36 overflow-hidden">
  <div class="container mx-auto px-4">
    <h2 class="mb-14 font-heading font-semibold text-center text-6xl sm:text-7xl text-gray-900" >Frequently asked question</h2>
    <div class="max-w-2xl mx-auto bg-gradient-cyan p-0.5">
      <div class="flex flex-wrap">
        <div class="w-full">
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" href="#">
            <div class="pb-0.5 bg-gradient-cyan">
              <div class="py-3.5 px-5 bg-white">
                <div class="flex flex-wrap justify-between -m-2">
                  <div class="flex-1 p-2">
                    <p class="font-heading font-semibold text-lg text-gray-900" >Is it really unlimited downloads?</p>
                    <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="visibility-item overflow-hidden h-0 duration-500">
                      <p class="mt-5 text-base text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
                    </div>
                  </div>
                  <div class="w-auto p-2">
                    <div :class="{ 'hidden': accordion }" class="pt-1">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <div :class="{ 'hidden': !accordion }" class="hidden p-1">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3.75 7.5L9 2.25M9 2.25L14.25 7.5M9 2.25V15.75" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full">
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" href="#">
            <div class="pb-0.5 bg-gradient-cyan">
              <div class="py-3.5 px-5 bg-white">
                <div class="flex flex-wrap justify-between -m-2">
                  <div class="flex-1 p-2">
                    <p class="font-heading font-semibold text-lg text-gray-900" >Do you offer discounts on annual plans?</p>
                    <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="visibility-item overflow-hidden h-0 duration-500">
                      <p class="mt-5 text-base text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
                    </div>
                  </div>
                  <div class="w-auto p-2">
                    <div :class="{ 'hidden': accordion }" class="pt-1">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <div :class="{ 'hidden': !accordion }" class="hidden p-1">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3.75 7.5L9 2.25M9 2.25L14.25 7.5M9 2.25V15.75" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full">
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" href="#">
            <div class="pb-0.5 bg-gradient-cyan">
              <div class="py-3.5 px-5 bg-white">
                <div class="flex flex-wrap justify-between -m-2">
                  <div class="flex-1 p-2">
                    <p class="font-heading font-semibold text-lg text-gray-900" >What kind of file do you offer with the packages?</p>
                    <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="visibility-item overflow-hidden h-0 duration-500">
                      <p class="mt-5 text-base text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
                    </div>
                  </div>
                  <div class="w-auto p-2">
                    <div :class="{ 'hidden': accordion }" class="pt-1">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <div :class="{ 'hidden': !accordion }" class="hidden p-1">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3.75 7.5L9 2.25M9 2.25L14.25 7.5M9 2.25V15.75" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full">
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" href="#">
            <div class="pb-0.5 bg-gradient-cyan">
              <div class="py-3.5 px-5 bg-white">
                <div class="flex flex-wrap justify-between -m-2">
                  <div class="flex-1 p-2">
                    <p class="font-heading font-semibold text-lg text-gray-900" >Can I invite my team members?</p>
                    <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="visibility-item overflow-hidden h-0 duration-500">
                      <p class="mt-5 text-base text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
                    </div>
                  </div>
                  <div class="w-auto p-2">
                    <div :class="{ 'hidden': accordion }" class="pt-1">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <div :class="{ 'hidden': !accordion }" class="hidden p-1">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3.75 7.5L9 2.25M9 2.25L14.25 7.5M9 2.25V15.75" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full">
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" href="#">
            <div class="py-3.5 px-5 bg-white">
              <div class="flex flex-wrap justify-between -m-2">
                <div class="flex-1 p-2">
                  <p class="font-heading font-semibold text-lg text-gray-900" >What is your refund policy?</p>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="visibility-item overflow-hidden h-0 duration-500">
                    <p class="mt-5 text-base text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }" class="pt-1">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden p-1">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.75 7.5L9 2.25M9 2.25L14.25 7.5M9 2.25V15.75" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-24 pb-36 bg-white overflow-hidden">
  <div class="container">
    <h2 class="fs-10 fw-semibold text-center mb-14" >Frequently asked question</h2>
    <div class="mw-md-2xl mx-auto" style="padding: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
      <div class="bg-white">
        <div class="row">
          <div class="col-12"><a class="block" href="#">
              <div class="py-4 px-5">
                <div class="row align-items-center justify-content-between">
                  <div class="col-auto">
                    <h3 class="fs-17 fw-semibold mb-0" >Is it really unlimited downloads?</h3>
                  </div>
                  <div class="col-auto">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
              <div style="padding-bottom: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)"></div></a></div>
          <div class="col-12"><a href="#">
              <div class="py-4 px-5">
                <div class="row align-items-center justify-content-between">
                  <div class="col-auto">
                    <h3 class="fs-17 fw-semibold mb-0" >Do you offer discounts on annual plans?</h3>
                  </div>
                  <div class="col-auto">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.75 7.5L9 2.25M9 2.25L14.25 7.5M9 2.25V15.75" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div class="col-12 mt-5">
                    <p class="mb-0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
                  </div>
                </div>
              </div>
              <div style="padding-bottom: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)"></div></a></div>
          <div class="col-12"><a href="#">
              <div class="py-4 px-5">
                <div class="row align-items-center justify-content-between">
                  <div class="col-auto">
                    <h3 class="fs-17 fw-semibold mb-0" >What kind of file do you offer with the packages?</h3>
                  </div>
                  <div class="col-auto">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
              <div style="padding-bottom: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)"></div></a></div>
          <div class="col-12"><a href="#">
              <div class="py-4 px-5">
                <div class="row align-items-center justify-content-between">
                  <div class="col-auto">
                    <h3 class="fs-17 fw-semibold mb-0" >Can I invite my team members?</h3>
                  </div>
                  <div class="col-auto">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
              <div style="padding-bottom: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)"></div></a></div>
          <div class="col-12"><a href="#">
              <div class="py-4 px-5">
                <div class="row align-items-center justify-content-between">
                  <div class="col-auto">
                    <h3 class="fs-17 fw-semibold mb-0" >What is your refund policy?</h3>
                  </div>
                  <div class="col-auto">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div></a></div>
        </div>
      </div>
    </div>
  </div>
</section>