heroBeginner
Hero — Dark Image Stack
Dark-mode hero with image stacked above text content.
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 dark hero with Tailwind: gray-900 background, wide hero image at the top, centered headline + paragraph + dual CTAs below. Editorial feel for dark themes.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/hero/dark/c.js
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/tailblocks-hero-dark-c
-->
<div class="bg-gray-900 text-gray-300 min-h-screen flex items-center justify-center">
<div class="w-full">
<section class="text-gray-400 bg-gray-900 body-font">
<div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 md:mb-0 mb-10">
<img class="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
</div>
<div class="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
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-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg">
Button
</button>
</div>
</div>
</div>
</section>
</div>
</div>