featuresBeginner
Features — Card Grid
Feature cards in a grid layout.
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 feature card grid with Tailwind: rounded cards in a 2 or 3 column grid, each with an icon, heading, and description. Cards have subtle borders and hover lift.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/feature/light/d.js
License: MIT
Surfaced via https://vibedex.io/components/tailblocks-feature-light-d
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class="w-full">
<section class="text-gray-600 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-200 border-opacity-50 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-indigo-100 text-indigo-500 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-gray-900 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-500 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-200 border-opacity-50 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-indigo-100 text-indigo-500 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-gray-900 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-500 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>