heroBeginner
Hero — Promo Banner
Eye-catching promotional banner with image, headline, and CTA.
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 promo-banner hero with Tailwind: a wide rounded card with copy on one side and an image on the other, designed to function as a launch announcement at the top of a page.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/banners/2.html
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-marketing-banner-2
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class=" w-full">
<section class="bg-white lg:grid lg:h-screen lg:place-content-center">
<div class="mx-auto w-screen max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8 lg:py-32">
<div class="max-w-prose text-left">
<h1 class="text-4xl font-bold text-gray-900 sm:text-5xl">
Understand user flow and
<strong class="text-indigo-600"> increase </strong>
conversions
</h1>
<p class="mt-4 text-base text-pretty text-gray-700 sm:text-lg/relaxed">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, nisi. Natus, provident
accusamus impedit minima harum corporis iusto.
</p>
<div class="mt-4 flex gap-4 sm:mt-6">
<a
class="inline-block rounded border border-indigo-600 bg-indigo-600 px-5 py-3 font-medium text-white shadow-sm transition-colors hover:bg-indigo-700"
href="#"
>
Get Started
</a>
<a
class="inline-block rounded border border-gray-200 px-5 py-3 font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900"
href="#"
>
Learn More
</a>
</div>
</div>
</div>
</section>
</div>
</div>