heroBeginner
Hero — Split with Image
Two-column hero with text on the left and a large image on the right.
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 with Tailwind: two columns on md+, text content (headline, subheadline, CTA pair) on the left and a single large image on the right. Stack on mobile with image below. Used for product landing pages.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/hero/light/a.js
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/tailblocks-hero-light-a
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class="w-full">
<section class="text-gray-600 body-font">
<div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
Before they sold out<br class="hidden lg:inline-block" />
readymade gluten
</h1>
<p class="mb-8 leading-relaxed">
Copper mug try-hard pitchfork pour-over freegan heirloom neutra air
plant cold-pressed tacos poke beard tote bag. Heirloom echo park
mlkshk tote bag selvage hot chicken authentic tumeric truffaut
hexagon try-hard chambray.
</p>
<div class="flex justify-center">
<button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
Button
</button>
<button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">
Button
</button>
</div>
</div>
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
<img class="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
</div>
</div>
</section>
</div>
</div>