Tailwind Faq Components

<section class="py-24 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/4 px-4 mb-12 lg:mb-0">
        <div class="flex items-center">
          <span class="font-heading text-xl">04</span>
          <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
          <span class="font-heading text-xl">Helpdesk/FAQs</span>
        </div>
      </div>
      <div class="w-full lg:w-3/4 px-4">
        <h1 class="font-heading text-4xl mb-6">Can I change my plan?</h1>
        <p class="max-w-2xl font-light mb-12 tracking-tight">Yees, u can try us for free for 60 days. We&rsquo;ll provide u with a free, personalized 40-minute onboarding call to get you up and running as soon as possible.</p>
        <div class="pb-16 mb-10 border-b border-gray-200">
          <div class="flex max-w-max px-10 py-2 mb-2 border border-gray-200 rounded-lg">
            <svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
            <span class="ml-6 sm:text-lg">The first payment</span>
          </div>
          <div class="flex max-w-max px-10 py-2 mb-2 border border-gray-200 rounded-lg">
            <svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
            <span class="ml-6 sm:text-lg">The same amount for all</span>
          </div>
          <div class="flex max-w-max px-10 py-2 border border-gray-200 rounded-lg">
            <svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
            <span class="ml-6 sm:text-lg">Extra 10% off</span>
          </div>
        </div>
        <div>
          <div class="mb-24 sm:mb-32">
            <button class="flex w-full text-left pb-6 mb-10 border-b border-gray-200 items-center justify-between">
              <h2 class="font-heading text-2xl sm:text-3xl md:text-4xl mr-2">How dou I change my account email?</h2>
              <svg class="flex-shrink-0" width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                <path d="M26.6344 18.6471H21.5375V13.3658C21.5375 12.6096 20.925 11.9971 20.1687 11.9971C19.4125 11.9971 18.8 12.6096 18.8 13.3658V18.6471H13.3625C12.6125 18.6471 12 19.2596 12 20.0158C12 20.7721 12.6125 21.3846 13.3687 21.3846H18.8063V26.6346C18.8063 27.3908 19.4188 28.0033 20.175 28.0033C20.9313 28.0033 21.5437 27.3908 21.5437 26.6346V21.3846H26.6406C27.3969 21.3846 28.0094 20.7721 28.0094 20.0158C28 19.2596 27.3906 18.6471 26.6344 18.6471Z" fill="#C7C9CF"></path>
                <defs><rect width="16" height="16" fill="white" transform="translate(12 12)"></rect></defs>
              </svg>
            </button>
            <button class="flex w-full text-left pb-6 mb-10 border-b border-gray-200 items-center justify-between">
              <h2 class="font-heading text-2xl sm:text-3xl md:text-4xl mr-2">Can I change my plan?</h2>
              <svg class="flex-shrink-0" width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                <path d="M26.6344 18.6471H21.5375V13.3658C21.5375 12.6096 20.925 11.9971 20.1687 11.9971C19.4125 11.9971 18.8 12.6096 18.8 13.3658V18.6471H13.3625C12.6125 18.6471 12 19.2596 12 20.0158C12 20.7721 12.6125 21.3846 13.3687 21.3846H18.8063V26.6346C18.8063 27.3908 19.4188 28.0033 20.175 28.0033C20.9313 28.0033 21.5437 27.3908 21.5437 26.6346V21.3846H26.6406C27.3969 21.3846 28.0094 20.7721 28.0094 20.0158C28 19.2596 27.3906 18.6471 26.6344 18.6471Z" fill="#C7C9CF"></path>
                <defs><rect width="16" height="16" fill="white" transform="translate(12 12)"></rect></defs>
              </svg>
            </button>
            <button class="flex w-full text-left pb-6 mb-10 border-b border-gray-200 items-center justify-between">
              <h2 class="font-heading text-2xl sm:text-3xl md:text-4xl mr-2">How dou I change my account email?</h2>
              <svg class="flex-shrink-0" width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                <path d="M26.6344 18.6471H21.5375V13.3658C21.5375 12.6096 20.925 11.9971 20.1687 11.9971C19.4125 11.9971 18.8 12.6096 18.8 13.3658V18.6471H13.3625C12.6125 18.6471 12 19.2596 12 20.0158C12 20.7721 12.6125 21.3846 13.3687 21.3846H18.8063V26.6346C18.8063 27.3908 19.4188 28.0033 20.175 28.0033C20.9313 28.0033 21.5437 27.3908 21.5437 26.6346V21.3846H26.6406C27.3969 21.3846 28.0094 20.7721 28.0094 20.0158C28 19.2596 27.3906 18.6471 26.6344 18.6471Z" fill="#C7C9CF"></path>
                <defs><rect width="16" height="16" fill="white" transform="translate(12 12)"></rect></defs>
              </svg>
            </button>
            <button class="flex w-full text-left pb-6 border-b border-gray-200 items-center justify-between">
              <h2 class="font-heading text-2xl sm:text-3xl md:text-4xl mr-2">Can I change my plan?</h2>
              <svg class="flex-shrink-0" width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                <path d="M26.6344 18.6471H21.5375V13.3658C21.5375 12.6096 20.925 11.9971 20.1687 11.9971C19.4125 11.9971 18.8 12.6096 18.8 13.3658V18.6471H13.3625C12.6125 18.6471 12 19.2596 12 20.0158C12 20.7721 12.6125 21.3846 13.3687 21.3846H18.8063V26.6346C18.8063 27.3908 19.4188 28.0033 20.175 28.0033C20.9313 28.0033 21.5437 27.3908 21.5437 26.6346V21.3846H26.6406C27.3969 21.3846 28.0094 20.7721 28.0094 20.0158C28 19.2596 27.3906 18.6471 26.6344 18.6471Z" fill="#C7C9CF"></path>
                <defs><rect width="16" height="16" fill="white" transform="translate(12 12)"></rect></defs>
              </svg>
            </button>
          </div>
          <div class="lg:ml-20"><a class="inline-block w-full sm:w-auto px-7 py-4 mb-4 sm:mb-0 sm:mr-6 text-center font-medium border border-gray-900 hover:text-gray-700 rounded" href="#">All Questions</a><a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Have other questions?</a></div>
        </div>
      </div>
    </div>
  </div>
</section>