Faq Components in Nightsable library

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-16 md:max-w-2xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">FAQ</h2>
    </div>
    <div class="flex flex-wrap p-3 md:-m-8">
      <div class="w-full md:w-1/2 p-3 md:p-8">
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Investing Basics</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Portfolio Diversification</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Crypto Q&amp;A</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Sustainable Investing</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-3 md:p-8">
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Real Estate Insights</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Risk Management Tips</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Stock Market FAQs</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Retirement Planning</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black">
  <div class="container">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-0" style="letter-spacing: -0.2rem;">FAQ</h1>
    </div>
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row mx-lg-n6">
        <div class="col-lg-6 mb-12 mb-lg-0 px-lg-6">
          <div><a class="btn d-flex pt-0 px-0 pb-8 mb-12 w-100 text-start border-0 border-bottom rounded-0" href="#">
              <h6 class="fs-5">What is Cult Wine Investment?</h6><span class="ms-auto ps-4">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></a><a class="btn d-flex pt-0 px-0 pb-8 mb-12 w-100 text-start border-0 border-bottom rounded-0" href="#">
              <h6 class="fs-5">What is Cult Wine Investment?</h6><span class="ms-auto ps-4">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></a><a class="btn d-flex pt-0 px-0 pb-8 mb-12 w-100 text-start border-0 border-bottom rounded-0" href="#">
              <h6 class="fs-5">What is Cult Wine Investment?</h6><span class="ms-auto ps-4">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></a><a class="btn d-flex pt-0 px-0 pb-8 w-100 text-start border-0 border-bottom rounded-0" href="#">
              <h6 class="fs-5">What is Cult Wine Investment?</h6><span class="ms-auto ps-4">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></a></div>
        </div>
        <div class="col-lg-6 px-lg-6">
          <div><a class="btn d-flex pt-0 px-0 pb-8 mb-12 w-100 text-start border-0 border-bottom rounded-0" href="#">
              <h6 class="fs-5">What is Cult Wine Investment?</h6><span class="ms-auto ps-4">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></a><a class="btn d-flex pt-0 px-0 pb-8 mb-12 w-100 text-start border-0 border-bottom rounded-0" href="#">
              <h6 class="fs-5">What is Cult Wine Investment?</h6><span class="ms-auto ps-4">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></a><a class="btn d-flex pt-0 px-0 pb-8 mb-12 w-100 text-start border-0 border-bottom rounded-0" href="#">
              <h6 class="fs-5">What is Cult Wine Investment?</h6><span class="ms-auto ps-4">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></a><a class="btn d-flex pt-0 px-0 pb-8 w-100 text-start border-0 border-bottom rounded-0" href="#">
              <h6 class="fs-5">What is Cult Wine Investment?</h6><span class="ms-auto ps-4">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></a></div>
        </div>
      </div>
    </div>
  </div>
</section>