Faq Components in Suncealand library

<section class="py-20 md:py-40">
  <div class="container px-4 mx-auto mb-20">
    <div class="max-w-sm mx-auto md:max-w-none mb-24 md:mb-40">
      <div class="inline-flex px-5 py-2 items-center mb-10 bg-purple-50 rounded-full">
        <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
        <span class="uppercase text-sm font-medium tracking-tight">FREQUENTLY ASKED QUESTIONS</span>
      </div>
      <div class="flex flex-wrap items-center justify-between -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-12 md:mb-0">
          <h1 class="text-5xl sm:text-7xl md:text-8xl font-heading font-semibold">Helpdesk</h1>
        </div>
        <div class="w-full md:w-1/2 px-4 md:text-right">
          <a class="group relative inline-block h-16 w-full sm:w-40 bg-blueGray-900 rounded" href="#">
            <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
              <div class="flex h-full w-full items-center justify-center bg-white border-2 border-blueGray-900 rounded">
                <span class="text-base font-semibold uppercase">See all</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 mb-20 lg:mb-36">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <div class="max-w-sm mx-auto lg:mx-0">
          <h4 class="text-3xl font-medium mb-8">Can I change my plan later?</h4>
          <p class="text-lg">Record your audio and upload it to Suncealand. We'll help you distribute your podcast to Spotify, Apple and Google Podcasts.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <div class="max-w-sm mx-auto lg:mx-0">
          <h4 class="text-3xl font-medium mb-8">Can I change my plan later?</h4>
          <p class="text-lg">Record your audio and upload it to Suncealand. We'll help you distribute your podcast to Spotify, Apple and Google Podcasts.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4">
        <div class="max-w-sm mx-auto lg:mx-0">
          <h4 class="text-3xl font-medium mb-8">Can I change my plan later?</h4>
          <p class="text-lg">Record your audio and upload it to Suncealand. We'll help you distribute your podcast to Spotify, Apple and Google Podcasts.</p>
        </div>
      </div>
    </div>
    <div class="relative max-w-5xl mx-auto p-3 rounded-2xl">
      <img class="absolute top-0 left-0 h-full w-full" src="suncealand-assets/background/banner-background-circles.png" alt="">
      <div class="relative bg-white rounded-2xl">
        <div class="flex flex-wrap items-center justify-between py-8 px-8 md:px-14">
          <div class="w-full md:w-2/3 mb-12 md:mb-0">
            <div class="flex flex-wrap md:flex-nowrap">
              <div class="flex-shrink-0 w-full md:w-auto mb-4 md:mr-10">
                <img class="w-18 h-18" src="suncealand-assets/images/avatar-girl-banner.png" alt="">
              </div>
              <div class="w-full md:w-auto">
                <h5 class="text-2xl font-medium">Still have questions?</h5>
                <p class="text-lg">Can’t find the answer you are looking fore? Send a message.</p>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/3 md:text-right">
            <a class="group relative inline-block h-16 w-full sm:w-40 bg-blueGray-900 rounded" href="#">
              <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                <div class="flex h-full w-full items-center justify-center bg-yellow-500 border-2 border-blueGray-900 rounded">
                  <span class="text-base font-semibold uppercase">Chat</span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>