Hero split com imagem

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-20 px-6">
  <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
    <div>
      <h1 class="text-4xl font-bold text-gray-900 mb-5 leading-tight">O dashboard que a sua equipa vai realmente usar.</h1>
      <p class="text-lg text-gray-500 mb-8">Dados em tempo real, sem dashboards vazios. Configurado em 10 minutos.</p>
      <div class="flex gap-3">
        <a href="#" class="bg-gray-900 text-white font-semibold px-6 py-3 rounded-lg">Testar grátis</a>
        <a href="#" class="border border-gray-300 font-semibold px-6 py-3 rounded-lg">Saber mais</a>
      </div>
    </div>
    <img src="https://picsum.photos/seed/hero1/600/420" class="rounded-2xl shadow-xl w-full object-cover" alt="preview" />
  </div>
</section>