Eter (HTML) · FooterMeraki-style · MIT

Adicionar a coleção

Ainda sem coleções.

Footer com colunas + app badges

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 md:grid-cols-3 gap-10 mb-10">
    <div><h3 class="text-white font-bold text-lg mb-3">AppName</h3><p class="text-sm">Disponível em iOS e Android.</p>
      <div class="flex gap-3 mt-4"><div class="bg-gray-800 rounded-lg px-4 py-2 text-xs text-white">App Store</div><div class="bg-gray-800 rounded-lg px-4 py-2 text-xs text-white">Google Play</div></div>
    </div>
    <div><h4 class="text-white font-semibold text-sm mb-3">Recursos</h4><ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white">Documentação</a></li><li><a href="#" class="hover:text-white">API</a></li></ul></div>
    <div><h4 class="text-white font-semibold text-sm mb-3">Social</h4><ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white">Instagram</a></li><li><a href="#" class="hover:text-white">LinkedIn</a></li></ul></div>
  </div>
  <div class="max-w-6xl mx-auto border-t border-gray-800 pt-6 text-xs">© 2026 AppName Inc.</div>
</footer>