FeatureCard

Features

About

A simple FeatureCard with Hover Animations

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds FeatureCard to your project and fits it to your theme.

Code

How FeatureCard is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import FeatureCard from "@/components/ui/feature-card";

const cards = [
  {
    title:"Feature Card Component",
    description:"Ideal for Agencies or SaaS Companies that want a minimalistic approach to showcase benefits.",
    extraStyles:"hover:rotate-3",
  },
  {
    title:"Feature Card Component",
    description:"Ideal for Agencies or SaaS Companies that want a minimalistic approach to showcase benefits.",
    extraStyles:" hover:rotate-3"
  },
]

export default function DemoOne() {
  return (
    <main className="flex flex-wrap gap-4 items-center justify-center w-screen min-h-screen mx-auto bg-[#F0F0F0]">
      {cards.map((card, index) => (
      <FeatureCard
        key={index}
        title={card.title}
        description={card.description}
      />
      ))}    
  </main>
  );
}