heroBeginner
Hero — Dark Centered
Dark-mode centered hero with embedded stats.
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 centered hero with Tailwind: gray-900 background with a centered headline, paragraph, dual CTAs, and an inline stats line. Used for AI/dev-tool landing pages.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/hero/dark/b.js
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/tailblocks-hero-dark-b
-->
<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 items-center justify-center flex-col">
<img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
<div class="text-center lg:w-2/3 w-full">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
Microdosing synth tattooed vexillologist
</h1>
<p class="leading-relaxed mb-8">
Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing
tousled. Chambray dreamcatcher trust fund, kitsch vice godard disrupt
ramps hexagon mustache umami snackwave tilde chillwave ugh. Pour-over
meditation PBR&B pickled ennui celiac mlkshk freegan photo booth af
fingerstache pitchfork.
</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>