heroBeginner

Split Hero

Hero with text on the left, full-bleed image on the right.

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 a split hero with Tailwind: a 2-column layout with text content on the left (eyebrow, big headline, supporting paragraph, CTA pair) and a tall hero image on the right. Stack on mobile with the image first. Used as a primary landing hero alternative to the full-bleed image style.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/sections/2.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-marketing-section-2
-->
<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="grid grid-cols-1 gap-4 md:grid-cols-4 md:items-center md:gap-8">
          <div class="md:col-span-1">
            <div class="max-w-prose md:max-w-none">
              <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>
          </div>

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