Card

Cards 90

About

Cashback Partners Card This component displays a card with a title and a grid of partner logos, names, and cashback percentages. It's designed to be responsive and theme-aware, adapting to both light and dark modes.

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

Code

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

Usage.tsx

import * as React from "react";
import { CashbackPartnersCard, Partner } from "@/components/ui/card-1";

// --- Logo Components using external SVG URLs ---
const GoogleLogo = () => (
  <img src="https://cdn.21st.dev/assets/mirror/a6/a60266dab17c1c00981c7077fa025aa84c92782e0657ca2f78b7f70cbb8d5a56.svg" alt="Google logo" className="h-6 w-6" />
);

const AppleLogo = () => (
  <img src="https://cdn.21st.dev/assets/mirror/de/de2f3496ee97a2f7adeaa65b7e5cab617b425ab37aab4c14c87057a4e2af77f8.svg" alt="Apple logo" className="h-7 w-7" />
);

const Slack = () => (
  <img src="https://cdn.21st.dev/assets/mirror/29/29734796b3a85f9d0e03150d53142fab0b7f994ae80c7e3e1efd0bef52c12f5d.svg" alt="Mailchimp logo" className="h-7 w-7" />
);

const FigmaLogo = () => (
  <img src="https://cdn.21st.dev/assets/mirror/5b/5bcdea3417293412845b8298fe357fce3b192e8ff112d9b3fef315bc5cd127f6.svg" alt="Figma logo" className="h-7 w-7" />
);


// --- Demo Component ---
const CashbackPartnersDemo = () => {
  const partnersData: Partner[] = [
    {
      name: "Google",
      cashback: "1.5%",
      logo: <GoogleLogo />,
      href: "#",
    },
    {
      name: "N8n",
      cashback: "1.1%",
      logo: <AppleLogo />,
      href: "#",
    },
    {
      name: "Slack",
      cashback: "3.2%",
      logo: <Slack />,
      href: "#",
    },
    {
      name: "Figma",
      cashback: "2.8%",
      logo: <FigmaLogo />,
      href: "#",
    },
  ];

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
      <CashbackPartnersCard 
        title="Cashback From Partners" 
        partners={partnersData} 
      />
    </div>
  );
};

export default CashbackPartnersDemo;