Footer com 4 colunas

Footer — bloco Tailwind pronto a copiar.

Instalação

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

html

<footer class="bg-gray-950 text-gray-400 py-14 px-6">
  <div class="max-w-6xl mx-auto grid sm:grid-cols-2 md:grid-cols-4 gap-8 mb-10">
    <div>
      <h3 class="text-white font-bold text-lg mb-3">Acme.</h3>
      <p class="text-sm">A plataforma para equipas que querem crescer sem fricção.</p>
    </div>
    <div>
      <h4 class="text-white font-semibold text-sm mb-3">Produto</h4>
      <ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white">Funcionalidades</a></li><li><a href="#" class="hover:text-white">Preços</a></li><li><a href="#" class="hover:text-white">Integrações</a></li></ul>
    </div>
    <div>
      <h4 class="text-white font-semibold text-sm mb-3">Empresa</h4>
      <ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white">Sobre nós</a></li><li><a href="#" class="hover:text-white">Carreiras</a></li><li><a href="#" class="hover:text-white">Blog</a></li></ul>
    </div>
    <div>
      <h4 class="text-white font-semibold text-sm mb-3">Legal</h4>
      <ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white">Privacidade</a></li><li><a href="#" class="hover:text-white">Termos</a></li></ul>
    </div>
  </div>
  <div class="max-w-6xl mx-auto border-t border-gray-800 pt-6 text-xs flex flex-col sm:flex-row justify-between gap-2">
    <span>© 2026 Acme, Lda. Todos os direitos reservados.</span>
    <div class="flex gap-4"><a href="#" class="hover:text-white">X</a><a href="#" class="hover:text-white">LinkedIn</a><a href="#" class="hover:text-white">Instagram</a></div>
  </div>
</footer>