heroBeginner

Hero — Imageless

Hero with bold typography and no imagery.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build an imageless marketing hero with Tailwind: huge centered headline, paragraph subhead, and a CTA. Pure-typography hero — relies on dramatic font sizing and generous whitespace.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/sections/4.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-marketing-section-4
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class=" w-full">
<section>
      <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <div class="space-y-4 md:space-y-8">
          <div class="max-w-prose">
            <h2 class="text-2xl font-semibold text-gray-900 sm:text-3xl">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </h2>

            <p class="mt-4 text-pretty text-gray-700">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe
              architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas
              sequi.
            </p>
          </div>

          <img
            src="https://images.unsplash.com/photo-1731690415686-e68f78e2b5bd?auto=format&fit=crop&q=80&w=1160"
            class="rounded"
            alt=""
          />
        </div>
      </div>
    </section>
  </div>
</div>