Eter (HTML) · FooterHyperUI-style · MIT

Adicionar a coleção

Ainda sem coleções.

Footer simples com newsletter

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-white border-t border-gray-100 py-12 px-6">
  <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
    <div>
      <h3 class="font-bold text-lg mb-1">Nova<span class="text-orange-500">.</span></h3>
      <p class="text-sm text-gray-500">Receba conteúdo sobre produto e crescimento.</p>
    </div>
    <form class="flex gap-2">
      <input type="email" placeholder="Email" class="border border-gray-300 rounded-lg px-4 py-2.5 text-sm outline-none" />
      <button class="bg-gray-900 text-white text-sm font-semibold px-5 py-2.5 rounded-lg">Subscrever</button>
    </form>
  </div>
</footer>