Animated flip cards

Cards

About

It's an animated card with a hover effect which makes it flip for more details.

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

Code

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

Usage.tsx

'use client';

import * as React from 'react'
import { AnimatedCard } from "@/components/ui/animated-flip-cards"

export function Demo() {
  const data = [
    {
      date: '20 May, 2023',
      company: 'Amazon',
      role: 'Senior UI/UX Designer',
      logo: 'https://cdn.21st.dev/assets/mirror/5b/5b4d8371d79a5c0d3a27ea4e929f772e68d47f7d267496bf9211d5f60fcf8084.svg',
      tags: ['Part time', 'Full time', 'Distant', 'Remote'],
      rate: '$250/hr',
      location: 'San Francisco, CA',
      backgroundColor: 'bg-red-100',
      backFaceContent:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s check",
    },
    {
      date: '21 June, 2023',
      company: 'Google',
      role: 'Frontend Developer',
      logo: 'https://cdn.21st.dev/assets/mirror/a8/a8ec042934c876b60fb8120bddd526d4ef8b10b8a4ff89b881d427ed866275fb.svg',
      tags: ['Full time', 'Tech', 'Remote', 'Project work'],
      rate: '$200/hr',
      location: 'Mountain View, CA',
      backgroundColor: 'bg-[#D6F6ED]',
      backFaceContent:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
    },
  ];
  return (
    <section
      className="m-auto h-screen items-center justify-center flex-wrap flex gap-6 "
    >
      {data.map((job) => (
        <AnimatedCard key={job.company} {...job} />
      ))}
    </section>
  );
};