Feature Card

Features 156

About

feature card animated card

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

Code

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

Usage.tsx

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { FeatureCard } from "@/components/ui/feature-card";

export default function DemoOne() {
  const [selectedColor, setSelectedColor] = useState("violet");

  const colors = [
    { value: "violet", hex: "#7C3AED" },
    { value: "pink", hex: "#EC4899" },
    { value: "emerald", hex: "#10B981" },
    { value: "blue", hex: "#3B82F6" },
    { value: "fuchsia", hex: "#D946EF" },
  ];

  return (
    <div className= "flex flex-col items-center gap-10" >

    <div className="flex gap-3 flex-wrap justify-center z-10" >
    {
      colors.map((color) => (
        <button
      key= { color.value }
      onClick = {() => setSelectedColor(color.value)}
  className = {`w-8 h-8 rounded-full border-2 transition  cursor-pointer
        ${selectedColor === color.value ? "border-white scale-110" : "border-transparent"}`
}
style = {{ backgroundColor: color.hex }}
/>
  ))}
</div>


  < FeatureCard
title = "Accelerate Your Success"
description = "Unlock the power of impactful campaigns we handle everything so you can focus on growth."
items = {
  [
  "10-Week Launch Strategy",
  "10 Sponsored Influencer Posts",
  "100,000+ Targeted Views",
  "10 Viral Reddit Campaigns",
  "2-Hour Marketing Strategy Session",
]}
buttonText = "Get Started"

glowColor = { selectedColor }

  />
  </div>
  );
}