cardsBeginner
Feature Highlight Card
A compact card showcasing one product feature with icon and copy.
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 highlight card with Tailwind: rounded card with a small icon at the top in a colored tint, then a heading and a 2-line description, then a subtle 'Learn more →' link at the bottom. Used in 3-up grids on landing pages.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/cards/2.html
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-marketing-card-2
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class="mx-auto max-w-md p-6 w-full">
<a href="#" class="block">
<img
alt=""
src="https://images.unsplash.com/photo-1605721911519-3dfeb3be25e7?auto=format&fit=crop&q=80&w=1160"
class="h-64 w-full object-cover sm:h-80 lg:h-96"
/>
<h3 class="mt-4 text-lg font-bold text-gray-900 sm:text-xl">Lorem, ipsum dolor.</h3>
<p class="mt-2 max-w-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni reiciendis sequi ipsam
incidunt.
</p>
</a>
</div>
</div>