heroBeginner
Marketing Hero
Full-width hero with image, eyebrow, big headline, supporting copy, and dual CTAs.
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 marketing hero section with Tailwind: a full-bleed hero image at the top with a dark overlay, then below — an eyebrow tag, a large bold headline (50% of which uses a contrasting accent color), a one-paragraph subheadline, and two CTAs side by side (a solid primary button and a transparent secondary button with a border). Constrain to a max-w-screen-xl, padded section.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/sections/1.html
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-marketing-hero
-->
<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-2 md:items-center md:gap-8">
<div>
<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>
<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>