featuresBeginner
Features — Dark Three-Column
Dark-mode three-column feature grid.
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 feature grid with Tailwind: gray-900 background, 3-column layout with icon + heading + description per block.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/feature/dark/a.js
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/tailblocks-feature-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 px-5 py-24 mx-auto">
<h1 class="sm:text-3xl text-2xl font-medium title-font text-center text-white mb-20">
Raw Denim Heirloom Man Braid<br class="hidden sm:block" />
Selfies Wayfarers
</h1>
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div class="p-4 md:w-1/3 flex">
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-indigo-400 mb-4 flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-6 h-6"
viewBox="0 0 24 24"
>
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
</svg>
</div>
<div class="flex-grow pl-6">
<h2 class="text-white text-lg title-font font-medium mb-2">
Shooting Stars
</h2>
<p class="leading-relaxed text-base">
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
banh mi pug VHS try-hard ugh iceland kickstarter tumblr
live-edge tilde.
</p>
<a class="mt-3 text-indigo-400 inline-flex items-center">
Learn More
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-4 h-4 ml-2"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
<div class="p-4 md:w-1/3 flex">
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-indigo-400 mb-4 flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-6 h-6"
viewBox="0 0 24 24"
>
<circle cx="6" cy="6" r="3" />
<circle cx="6" cy="18" r="3" />
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
</svg>
</div>
<div class="flex-grow pl-6">
<h2 class="text-white text-lg title-font font-medium mb-2">
The Catalyzer
</h2>
<p class="leading-relaxed text-base">
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
banh mi pug VHS try-hard ugh iceland kickstarter tumblr
live-edge tilde.
</p>
<a class="mt-3 text-indigo-400 inline-flex items-center">
Learn More
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-4 h-4 ml-2"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
<div class="p-4 md:w-1/3 flex">
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-indigo-400 mb-4 flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-6 h-6"
viewBox="0 0 24 24"
>
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
</div>
<div class="flex-grow pl-6">
<h2 class="text-white text-lg title-font font-medium mb-2">
Neptune
</h2>
<p class="leading-relaxed text-base">
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
banh mi pug VHS try-hard ugh iceland kickstarter tumblr
live-edge tilde.
</p>
<a class="mt-3 text-indigo-400 inline-flex items-center">
Learn More
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-4 h-4 ml-2"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
</div>
</div>