bannersBeginner
Promo Banner
A larger 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 promotional banner with Tailwind: a wide rounded card with a left-side text block (eyebrow, headline, supporting line, CTA button) and a right-side image or graphic. Stack on mobile, side-by-side on md+. Used between sections to highlight a sale or launch.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/banners/1.html
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-marketing-banner
-->
<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="mx-auto max-w-prose text-center">
<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 justify-center 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>