Tailwind Faq Components

<section class="py-20 2xl:py-40 bg-blue-50">
  <div class="container px-4 mx-auto">
    <div class="mb-20 text-center">
      <span class="text-lg font-bold text-blue-500">Hey! Have any questions?</span>
      <h2 class="mt-8 text-7xl font-bold font-heading">FAQ&apos;s</h2>
    </div>
    <div class="max-w-4xl mx-auto">
      <ul>
        <li class="mb-4 px-4 lg:px-12 py-8 bg-white rounded-2xl">
          <button class="flex w-full text-left">
            <div class="w-auto mr-8">
              <span class="flex items-center justify-center w-12 h-12 text-lg font-bold bg-blue-100 rounded-full">1</span>
            </div>
            <div class="w-full mt-3">
              <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold">How should I develop my workflow over time?</h3>
                <span class="ml-4">
                  <svg class="w-4 h-4" width="18" height="10" viewbox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.18267 9.00018C0.910673 9.26818 0.473672 9.26818 0.203672 9.00018C-0.0663284 8.73218 -0.0673279 8.29918 0.203672 8.03118L8.11167 0.201183C8.38167 -0.0668173 8.81867 -0.0668173 9.09067 0.201183L16.9987 8.03118C17.2687 8.29918 17.2687 8.73218 16.9987 9.00018C16.7277 9.26818 16.2897 9.26818 16.0197 9.00018L8.60067 1.85918L1.18267 9.00018Z" fill="#1F40FF"></path>
                  </svg>
                </span>
              </div>
              <div class="mt-6 border-l-2 border-gray-50 pl-10">
                <p class="mb-5 text-xl">The point of using Lorem Ipsum is that it has a more-or-less normal:</p>
                <p class="mb-2 text-lg">
                  <span class="inline-block mr-6 h-2 w-2 rounded-full bg-blue-500"></span>
                  <span>Distribution of letters</span>
                </p>
                <p class="text-lg">
                  <span class="inline-block mr-6 h-2 w-2 rounded-full bg-blue-500"></span>
                  <span>Content here</span>
                </p>
              </div>
            </div>
          </button>
        </li>
        <li class="mb-4 px-4 lg:px-12 py-8 bg-white rounded-2xl">
          <button class="flex w-full text-left">
            <div class="w-auto mr-8">
              <span class="flex items-center justify-center w-12 h-12 text-lg font-bold bg-blue-100 rounded-full">2</span>
            </div>
            <div class="w-full mt-3">
              <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold">Can I pay by card?</h3>
                <span class="ml-4">
                  <svg class="w-4 h-4" width="18" height="10" viewbox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16.0185 0.999999C16.2905 0.732 16.7275 0.732 16.9975 0.999999C17.2675 1.268 17.2685 1.701 16.9975 1.969L9.0895 9.799C8.8195 10.067 8.3825 10.067 8.1105 9.799L0.2025 1.969C-0.0675004 1.701 -0.0675004 1.268 0.2025 1C0.4735 0.732 0.9115 0.732 1.1815 1L8.6005 8.141L16.0185 0.999999Z" fill="#1F40FF"></path>
                  </svg>
                </span>
              </div>
              <div class="hidden mt-6 border-l-2 border-gray-50 pl-10">
                <p class="text-xl">The point of using Lorem Ipsum is that it has a more-or-less normal:</p>
              </div>
            </div>
          </button>
        </li>
        <li class="mb-4 px-4 lg:px-12 py-8 bg-white rounded-2xl">
          <button class="flex w-full text-left">
            <div class="w-auto mr-8">
              <span class="flex items-center justify-center w-12 h-12 text-lg font-bold bg-blue-100 rounded-full">3</span>
            </div>
            <div class="w-full mt-3">
              <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold">How often should the app be updated?</h3>
                <span class="ml-4">
                  <svg class="w-4 h-4" width="18" height="10" viewbox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16.0185 0.999999C16.2905 0.732 16.7275 0.732 16.9975 0.999999C17.2675 1.268 17.2685 1.701 16.9975 1.969L9.0895 9.799C8.8195 10.067 8.3825 10.067 8.1105 9.799L0.2025 1.969C-0.0675004 1.701 -0.0675004 1.268 0.2025 1C0.4735 0.732 0.9115 0.732 1.1815 1L8.6005 8.141L16.0185 0.999999Z" fill="#1F40FF"></path>
                  </svg>
                </span>
              </div>
              <div class="hidden mt-6 border-l-2 border-gray-50 pl-10">
                <p class="text-xl">The point of using Lorem Ipsum is that it has a more-or-less normal:</p>
              </div>
            </div>
          </button>
        </li>
        <li class="mb-4 px-4 lg:px-12 py-8 bg-white rounded-2xl">
          <button class="flex w-full text-left">
            <div class="w-auto mr-8">
              <span class="flex items-center justify-center w-12 h-12 text-lg font-bold bg-blue-100 rounded-full">4</span>
            </div>
            <div class="w-full mt-3">
              <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold">Are Zospace apps free?</h3>
                <span class="ml-4">
                  <svg class="w-4 h-4" width="18" height="10" viewbox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16.0185 0.999999C16.2905 0.732 16.7275 0.732 16.9975 0.999999C17.2675 1.268 17.2685 1.701 16.9975 1.969L9.0895 9.799C8.8195 10.067 8.3825 10.067 8.1105 9.799L0.2025 1.969C-0.0675004 1.701 -0.0675004 1.268 0.2025 1C0.4735 0.732 0.9115 0.732 1.1815 1L8.6005 8.141L16.0185 0.999999Z" fill="#1F40FF"></path>
                  </svg>
                </span>
              </div>
              <div class="hidden mt-6 border-l-2 border-gray-50 pl-10">
                <p class="text-xl">The point of using Lorem Ipsum is that it has a more-or-less normal:</p>
              </div>
            </div>
          </button>
        </li>
      </ul>
    </div>
  </div>
</section>