heroBeginner
Hero — Dark Split
Dark-mode split hero with bold headline and image.
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-mode hero with Tailwind: gray-900 background, white headline, two CTAs, and an image on the right. Same split-layout pattern as the light variant but with inverted colors.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/hero/dark/a.js
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/tailblocks-hero-dark-a
-->
<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: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-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 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>