It's an animated card with a hover effect which makes it flip for more details.
'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>
);
};