Newsletter card simples

Newsletter / Contact — 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-orange-50 py-16 px-6">
  <div class="max-w-lg mx-auto text-center bg-white p-10 rounded-2xl shadow-sm">
    <h3 class="text-xl font-bold mb-2">Fique a par das novidades</h3>
    <p class="text-sm text-gray-500 mb-6">Uma newsletter por mês. Sem spam, prometido.</p>
    <form class="flex gap-2">
      <input type="email" placeholder="o.seu@email.com" class="flex-1 border border-gray-300 rounded-lg px-4 py-2.5 text-sm outline-none" />
      <button class="bg-orange-500 text-white text-sm font-semibold px-5 py-2.5 rounded-lg">OK</button>
    </form>
  </div>
</section>