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.io/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://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=720&h=600" />
</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">
Ship faster<br/>with confidence
</h1>
<p class="mb-8 leading-relaxed">Your component, your code. We handed you a clean starting point so you can focus on the parts that actually differentiate your product.</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>