heroBeginner
Hero — Dark Two-Column
Dark-mode two-column content as hero.
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 2-column hero with Tailwind: gray-900 background, headline + paragraph on the left, supporting copy or stats on the right.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/content/dark/b.js
License: MIT
Surfaced via https://vibedex.io/components/tailblocks-content-dark-b-hero
-->
<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 body-font bg-gray-900">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap w-full mb-20">
<div class="lg:w-1/2 w-full mb-6 lg:mb-0">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
Ready when you are
</h1>
<div class="h-1 w-20 bg-indigo-500 rounded" />
</div>
<p class="lg:w-1/2 w-full leading-relaxed text-gray-400 text-opacity-90">Designed by builders for builders. Every component is documented, every interaction has been considered, every state has been thought through.</p>
</div>
<div class="flex flex-wrap -m-4">
<div class="xl:w-1/4 md:w-1/2 p-4">
<div class="bg-gray-800 bg-opacity-40 p-6 rounded-lg">
<img
class="h-40 rounded w-full object-cover object-center mb-6"
src="https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?auto=format&fit=crop&q=80&w=720&h=400"
alt="content"
/>
<h3 class="tracking-widest text-indigo-400 text-xs font-medium title-font">
SUBTITLE
</h3>
<h2 class="text-lg text-white font-medium title-font mb-4">
Chichen Itza
</h2>
<p class="leading-relaxed text-base">
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
hexagon disrupt edison bulbche.
</p>
</div>
</div>
<div class="xl:w-1/4 md:w-1/2 p-4">
<div class="bg-gray-800 bg-opacity-40 p-6 rounded-lg">
<img
class="h-40 rounded w-full object-cover object-center mb-6"
src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=721&h=401"
alt="content"
/>
<h3 class="tracking-widest text-indigo-400 text-xs font-medium title-font">
SUBTITLE
</h3>
<h2 class="text-lg text-white font-medium title-font mb-4">
Colosseum Roma
</h2>
<p class="leading-relaxed text-base">
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
hexagon disrupt edison bulbche.
</p>
</div>
</div>
<div class="xl:w-1/4 md:w-1/2 p-4">
<div class="bg-gray-800 bg-opacity-40 p-6 rounded-lg">
<img
class="h-40 rounded w-full object-cover object-center mb-6"
src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&q=80&w=722&h=402"
alt="content"
/>
<h3 class="tracking-widest text-indigo-400 text-xs font-medium title-font">
SUBTITLE
</h3>
<h2 class="text-lg text-white font-medium title-font mb-4">
Great Pyramid of Giza
</h2>
<p class="leading-relaxed text-base">
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
hexagon disrupt edison bulbche.
</p>
</div>
</div>
<div class="xl:w-1/4 md:w-1/2 p-4">
<div class="bg-gray-800 bg-opacity-40 p-6 rounded-lg">
<img
class="h-40 rounded w-full object-cover object-center mb-6"
src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&q=80&w=723&h=403"
alt="content"
/>
<h3 class="tracking-widest text-indigo-400 text-xs font-medium title-font">
SUBTITLE
</h3>
<h2 class="text-lg text-white font-medium title-font mb-4">
San Francisco
</h2>
<p class="leading-relaxed text-base">
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
hexagon disrupt edison bulbche.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>