Accordion simples

FAQ — bloco Tailwind pronto a copiar.

Instalação

Bloco em HTML + Tailwind — sem dependências de build. Copie e cole diretamente no seu projeto.

html

<section class="bg-white py-20 px-6">
  <div class="max-w-2xl mx-auto">
    <h2 class="text-3xl font-bold text-center mb-10">Perguntas frequentes</h2>
    <div class="space-y-3">
      <details class="border border-gray-200 rounded-xl p-4" open>
        <summary class="font-semibold cursor-pointer text-gray-900">Posso cancelar a qualquer momento?</summary>
        <p class="text-sm text-gray-500 mt-3">Sim, sem taxas de cancelamento nem período mínimo de fidelização.</p>
      </details>
      <details class="border border-gray-200 rounded-xl p-4">
        <summary class="font-semibold cursor-pointer text-gray-900">Há período de teste gratuito?</summary>
        <p class="text-sm text-gray-500 mt-3">Sim, 14 dias grátis sem necessidade de cartão de crédito.</p>
      </details>
      <details class="border border-gray-200 rounded-xl p-4">
        <summary class="font-semibold cursor-pointer text-gray-900">Que métodos de pagamento aceitam?</summary>
        <p class="text-sm text-gray-500 mt-3">Cartão de crédito, débito directo e transferência bancária.</p>
      </details>
    </div>
  </div>
</section>