carousel card

Cards

About

Animated card with carousel effect

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

Code

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

Usage.tsx

import Card from "@/components/ui/carousel-card";

const CARD_DATA = [
  {
    id: 1,
    imgUrl: 'https://cdn.21st.dev/assets/mirror/32/327d86ff3c8677219d40f97a247835c0891937f937552d2b325ddd63b624ad52.jpg',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices dolor ac massa maximus, blandit ullamcorper eros accumsan. Sed facilisis lacinia venenatis. Donec bibendum, eros ut porttitor consectetur, enim sapien vehicula mi, et consequat lacus turpis vel dolor. Vestibulum sagittis facilisis ipsum vitae suscipit. Proin in nisl sollicitudin, interdum erat eu, consequat odio. Sed auctor felis ac lorem molestie, a cursus elit malesuada. Etiam et varius erat. Aliquam pharetra convallis aliquet. Vestibulum eros ipsum, sodales ac imperdiet id, pellentesque sed tortor.',
  },
  {
    id: 2,
    imgUrl: 'https://cdn.21st.dev/assets/mirror/1c/1c98bce1616253e23af6f690181e6c2c84968ce51ecb9512e287920ec97c336a.jpg',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices dolor ac massa maximus, blandit ullamcorper eros accumsan. Sed facilisis lacinia venenatis. Donec bibendum, eros ut porttitor consectetur, enim sapien vehicula mi, et consequat lacus turpis vel dolor. Vestibulum sagittis facilisis ipsum vitae suscipit. Proin in nisl sollicitudin, interdum erat eu, consequat odio. Sed auctor felis ac lorem molestie, a cursus elit malesuada. Etiam et varius erat. Aliquam pharetra convallis aliquet. Vestibulum eros ipsum, sodales ac imperdiet id, pellentesque sed tortor.',
  },
  {
    id: 3,
    imgUrl: 'https://cdn.21st.dev/assets/mirror/1c/1cfeaad844afe4dafa6c97fc14bff442b61f17a95e195e6b97638f380b018b01.jpg',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices dolor ac massa maximus, blandit ullamcorper eros accumsan. Sed facilisis lacinia venenatis. Donec bibendum, eros ut porttitor consectetur, enim sapien vehicula mi, et consequat lacus turpis vel dolor. Vestibulum sagittis facilisis ipsum vitae suscipit. Proin in nisl sollicitudin, interdum erat eu, consequat odio. Sed auctor felis ac lorem molestie, a cursus elit malesuada. Etiam et varius erat. Aliquam pharetra convallis aliquet. Vestibulum eros ipsum, sodales ac imperdiet id, pellentesque sed tortor.',
  },
  {
    id: 4,
    imgUrl: 'https://cdn.21st.dev/assets/mirror/72/72dd368074e81932714c055cdda66d748cbd3e54716717a0f566087c25ffac31.jpg',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices dolor ac massa maximus, blandit ullamcorper eros accumsan. Sed facilisis lacinia venenatis. Donec bibendum, eros ut porttitor consectetur, enim sapien vehicula mi, et consequat lacus turpis vel dolor. Vestibulum sagittis facilisis ipsum vitae suscipit. Proin in nisl sollicitudin, interdum erat eu, consequat odio. Sed auctor felis ac lorem molestie, a cursus elit malesuada. Etiam et varius erat. Aliquam pharetra convallis aliquet. Vestibulum eros ipsum, sodales ac imperdiet id, pellentesque sed tortor.',
  },
  {
    id: 5,
    imgUrl: 'https://cdn.21st.dev/assets/mirror/61/61fcb9b5b171e9aca51c658ffd3b0f4d61d1efea33a3acb80e1e5bffb7ecf740.jpg',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices dolor ac massa maximus, blandit ullamcorper eros accumsan. Sed facilisis lacinia venenatis. Donec bibendum, eros ut porttitor consectetur, enim sapien vehicula mi, et consequat lacus turpis vel dolor. Vestibulum sagittis facilisis ipsum vitae suscipit. Proin in nisl sollicitudin, interdum erat eu, consequat odio. Sed auctor felis ac lorem molestie, a cursus elit malesuada. Etiam et varius erat. Aliquam pharetra convallis aliquet. Vestibulum eros ipsum, sodales ac imperdiet id, pellentesque sed tortor.',
  },
  {
    id: 6,
    imgUrl: 'https://cdn.21st.dev/assets/mirror/58/582a4459bcc56fecf623fef73a326cfa18ae0b963fe4972980b82bdec7ac9185.jpg',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices dolor ac massa maximus, blandit ullamcorper eros accumsan. Sed facilisis lacinia venenatis. Donec bibendum, eros ut porttitor consectetur, enim sapien vehicula mi, et consequat lacus turpis vel dolor. Vestibulum sagittis facilisis ipsum vitae suscipit. Proin in nisl sollicitudin, interdum erat eu, consequat odio. Sed auctor felis ac lorem molestie, a cursus elit malesuada. Etiam et varius erat. Aliquam pharetra convallis aliquet. Vestibulum eros ipsum, sodales ac imperdiet id, pellentesque sed tortor.',
  },
];

export default CARD_DATA;


const DemoOne = () => {
  return (
    <div className="flex w-full h-screen justify-center items-center">
      <Card data={CARD_DATA}/>
    </div>
  );
};

export { DemoOne };