<section class="mx-auto flex flex-col items-center gap-24 p-2 text-zinc-900 dark:text-zinc-50">
  <h3 class="mt-8 text-center text-5xl font-semibold">Frequently Asked Questions</h3>
  <div class="grid max-w-screen-lg grid-cols-[repeat(auto-fit,minmax(min(20rem,50%),1fr))] gap-4">
    <!-- FAQ1 -->
    <div class="grid grid-rows-[auto_1fr] gap-4 p-5">
      <h3 class="line-clamp-1 text-2xl font-semibold hover:!line-clamp-none">What is taco ?</h3>
      <p class="mb-auto line-clamp-5 break-all opacity-75 hover:!line-clamp-none max-sm:text-sm/6">
        Taco is a component library which helps to build websites faster. Cupiditate similique facilis, ad voluptatibus nostrum neque enim dicta
        tempore blanditiis sapiente Lorem ipsum dolor sit amet.
      </p>
    </div>
    <!-- FAQ2 -->
    <div class="grid grid-rows-[auto_1fr] gap-4 p-5">
      <h3 class="line-clamp-1 text-2xl font-semibold hover:!line-clamp-none">taco stands for ?</h3>
      <p class="mb-auto line-clamp-5 break-all opacity-75 hover:!line-clamp-none max-sm:text-sm/6">
        taco stands for tailwind components Cupiditate similique facilis, ad voluptatibus nostrum neque enim dicta tempore blanditiis sapiente
        Lorem ipsum dolor sit amet.
      </p>
    </div>
    <!-- FAQ3 -->
    <div class="grid grid-rows-[auto_1fr] gap-4 p-5">
      <h3 class="line-clamp-1 text-2xl font-semibold hover:!line-clamp-none">How to use taco ?</h3>
      <p class="mb-auto line-clamp-5 break-all opacity-75 hover:!line-clamp-none max-sm:text-sm/6">
        Search for required component and click copy button to copy the code Cupiditate similique facilis, ad voluptatibus nostrum neque enim
        dicta tempore blanditiis sapiente Lorem ipsum dolor sit amet.
      </p>
    </div>
    <!-- FAQ4 -->
    <div class="grid grid-rows-[auto_1fr] gap-4 p-5">
      <h3 class="line-clamp-1 text-2xl font-semibold hover:!line-clamp-none">How to use taco ?</h3>
      <p class="mb-auto line-clamp-5 break-all opacity-75 hover:!line-clamp-none max-sm:text-sm/6">
        Search for required component and click copy button to copy the code Cupiditate similique facilis, ad voluptatibus nostrum neque enim
        dicta tempore blanditiis sapiente Lorem ipsum dolor sit amet.
      </p>
    </div>
    <!-- FAQ5 -->
    <div class="grid grid-rows-[auto_1fr] gap-4 p-5">
      <h3 class="line-clamp-1 text-2xl font-semibold hover:!line-clamp-none">taco supports dark mode?</h3>
      <p class="mb-auto line-clamp-5 break-all opacity-75 hover:!line-clamp-none max-sm:text-sm/6">
        Yes, taco supports dark mode Cupiditate similique facilis, ad voluptatibus nostrum neque enim dicta tempore blanditiis sapiente Lorem
        ipsum dolor sit amet.
      </p>
    </div>
    <!-- FAQ6 -->
    <div class="grid grid-rows-[auto_1fr] gap-4 p-5">
      <h3 class="line-clamp-1 text-2xl font-semibold hover:!line-clamp-none">Responsive components ?</h3>
      <p class="mb-auto line-clamp-5 break-all opacity-75 hover:!line-clamp-none max-sm:text-sm/6">
        Yes, taco components are responsive Cupiditate similique facilis, ad voluptatibus nostrum neque enim dicta tempore blanditiis sapiente
        Lorem ipsum dolor sit.
      </p>
    </div>
  </div>
</section>

<section class="mx-auto flex flex-col items-center gap-8 p-2 text-zinc-900 dark:text-zinc-50">
    <h3 class="text-center text-4xl font-semibold">FAQ</h3>
    <div class="flex w-full max-w-screen-md flex-col gap-4">
    <!-- FAQ1 -->
    <div class="relative grid w-full rounded-md bg-white px-4 py-2 dark:bg-zinc-900">
        <input class="peer hidden appearance-none" aria-hidden="true" type="checkbox" name="faq" id="q1" />
        <label for="q1" class="flex w-full cursor-pointer select-none justify-between py-2 text-xl font-semibold after:content-['\002B'] peer-checked:after:content-['\2212']">
            What is taco?
        </label>
        <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 peer-checked:[grid-template-rows:1fr]">
            <p class="overflow-hidden opacity-75 max-sm:text-sm/6">
                Taco is a component library which helps to build websites faster. Cupiditate similique facilis, ad voluptatibus nostrum neque enim dicta
                tempore blanditiis sapiente Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, voluptas!.
            </p>
        </div>
        <div class="pointer-events-none absolute h-full w-full rounded-md ring-1 ring-zinc-200 peer-checked:shadow-lg peer-checked:ring-zinc-300 dark:ring-zinc-800 peer-checked:dark:ring-zinc-500" aria-hidden="true"></div>
    </div>
    <!-- FAQ2 -->
    <div class="relative grid w-full rounded-md bg-white px-4 py-2 ring-1 ring-zinc-200 dark:bg-zinc-900 dark:ring-0">
        <input class="peer hidden appearance-none" aria-hidden="true" type="checkbox" name="faq" id="q2" />
        <label for="q2" class="flex w-full cursor-pointer select-none justify-between py-2 text-xl font-semibold after:content-['\002B'] peer-checked:after:content-['\2212']">
            taco stands for ?
        </label>
        <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 peer-checked:[grid-template-rows:1fr]">
            <p class="overflow-hidden opacity-75 max-sm:text-sm/6">
                Taco is a component library which helps to build websites faster. Cupiditate similique facilis, ad voluptatibus nostrum neque enim dicta
                tempore blanditiis sapiente Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, voluptas!.
            </p>
        </div>
        <div class="pointer-events-none absolute h-full w-full rounded-md ring-1 ring-zinc-200 peer-checked:shadow-lg peer-checked:ring-zinc-300 dark:ring-zinc-800 peer-checked:dark:ring-zinc-500" aria-hidden="true"></div>
    </div>
    <!-- FAQ2 -->
    <div class="relative grid w-full rounded-md bg-white px-4 py-2 ring-1 ring-zinc-200 dark:bg-zinc-900 dark:ring-0">
        <input class="peer hidden appearance-none" aria-hidden="true" type="checkbox" name="faq" id="q3" />
        <label for="q3" class="flex w-full cursor-pointer select-none justify-between py-2 text-xl font-semibold after:content-['\002B'] peer-checked:after:content-['\2212']">
            How to use taco ?
        </label>
        <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 peer-checked:[grid-template-rows:1fr]">
            <p class="overflow-hidden opacity-75 max-sm:text-sm/6">
                Taco is a component library which helps to build websites faster. Cupiditate similique facilis, ad voluptatibus nostrum neque enim dicta
                tempore blanditiis sapiente Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, voluptas!.
            </p>
        </div>
        <div class="pointer-events-none absolute h-full w-full rounded-md ring-1 ring-zinc-200 peer-checked:shadow-lg peer-checked:ring-zinc-300 dark:ring-zinc-800 peer-checked:dark:ring-zinc-500" aria-hidden="true"></div>
    </div>
    </div>
</section>