Teams - Copy this React, Tailwind Component to your project

{list.map((item , index: number) => ( <Card shadow="sm" key={index} className='mb-4'> <CardBody className="overflow-visible p-0 w-full object-cover h-[200px]"> {/* h and w should be dynamic 1. h-[] and w-[] default value for mobiles 2. sm:h-[] and sm:w-[] for tablets 3. md:h-[] and md:w-[] for laptops 4. lg:h-[] and lg:w-[] for desktop */} <div className="rounded-lg bg-gray-200 m-0 cursor-pointer h-[230px] w-[160px] sm:h-[280px] sm:w-[230px] md:h-[280px] md:w-[230px] lg:h-[300px] lg:w-[200px] xl:h-[350px] xl:w-[190px] 2xl:h-[400px] 2xl:w-[230px]" > <div className="text-center"> <p className="justify-between text-slate-950 font-extrabold text-sm text-center"> {item.teamname} </p> <p className="border-b-4 border-gray-400 w-full"></p> <div className="m-1"> {item.rivals.map((rival: string, index: number) => ( <p key={index} className="text-slate-950 font-bold text-xs text-start p-1"> {rival} </p> ))} </div> </div> </div> </CardBody> </Card> quiero que esto vaya saliendo de forma animada