Hero clássico centrado

Hero — 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-24 px-6">
  <div class="max-w-3xl mx-auto text-center">
    <span class="inline-block bg-gray-100 text-gray-600 text-xs font-semibold px-3 py-1 rounded-full mb-5">✨ Novo: Automação com IA</span>
    <h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight mb-5">Construa produtos mais rápido, com menos código.</h1>
    <p class="text-lg text-gray-500 mb-8">A plataforma completa para equipas que querem lançar mais depressa sem sacrificar qualidade.</p>
    <div class="flex items-center justify-center gap-3">
      <a href="#" class="bg-gray-900 text-white font-semibold px-6 py-3 rounded-lg hover:bg-black">Começar grátis</a>
      <a href="#" class="border border-gray-300 text-gray-700 font-semibold px-6 py-3 rounded-lg hover:bg-gray-50">Ver demo</a>
    </div>
  </div>
</section>