featuresBeginner
Features — Dark Cards
Dark-mode feature card 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 card grid with Tailwind: gray-900 page background, slightly-lighter cards with icon + heading + description.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/feature/dark/d.js
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/tailblocks-feature-dark-d
-->
<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 flex flex-wrap">
<div class="flex flex-wrap -m-4">
<div class="p-4 lg:w-1/2 md:w-full">
<div class="flex border-2 rounded-lg border-gray-800 p-8 sm:flex-row flex-col">
<div class="w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-gray-800 text-indigo-400 flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-8 h-8"
viewBox="0 0 24 24"
>
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
</svg>
</div>
<div class="flex-grow">
<h2 class="text-white text-lg title-font font-medium mb-3">
Shooting Stars
</h2>
<p class="leading-relaxed text-base">
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine.
</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 class="p-4 lg:w-1/2 md:w-full">
<div class="flex border-2 rounded-lg border-gray-800 p-8 sm:flex-row flex-col">
<div class="w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-gray-800 text-indigo-400 flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-10 h-10"
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">
<h2 class="text-white text-lg title-font font-medium mb-3">
The Catalyzer
</h2>
<p class="leading-relaxed text-base">
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine.
</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>
</div>
</section>
</div>
</div>