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.io/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">
Ship faster<br/>with confidence
</h1>
<p class="mb-8 leading-relaxed">Crisp typography, considered spacing, and the kind of polish that makes your product feel ready before you ship it.</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://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&q=80&w=720&h=600" />
</div>
</div>
</section>
</div>
</div>