React Card + TailwindCSS

  function Card({id, title, image, description, location}) {
    return(
      <div className="shadow border-1-black rounded-md p-4 border border-blue-800">
        {image && <img src={image} alt={title} />}
        <h3 className="mt-2 text-2xl font-bold is-bold">{title}</h3>
        <p className="my-2">{description}</p>
        <p>{location}</p>
       </div>
    );
  }; 

    <div className="container mx-auto py-12 grid grid-cols-1 md:grid-cols-3 gap-6">
      {cardData.map((card) => 
      <Card 
        key={card.id}
        title={card.title}
        image={card.image}
        description={card.description}
        location={card.location}
        />
        )}
    </div>

const cardData = [
  {
    id: "0",
    title: "Mike",
    image: "https://frontendmike.com/wp-content/uploads/2025/03/selfie.jpg",
    description: "Lorem ipsum dolor sit amet consectetur adipiscing elit risus, eros aliquam sed fames fermentum placerat bibendum conubia curabitur, dignissim natoque ridiculus etiam nec donec lobortis.",
    location: "Atlanta, GA",
  },
  {
    id: "1",
    title: "Jane",
    image: "http://frontendmike.com/wp-content/uploads/2025/03/placeholder-woman-e1741983928238.jpg",
    description: "Lorem ipsum dolor sit amet consectetur adipiscing elit risus, eros aliquam sed fames fermentum placerat bibendum conubia curabitur, dignissim natoque ridiculus etiam nec donec lobortis.",
    location: "New York, NY",
  },
  {
    id: "2",
    title: "John",
    image: "http://frontendmike.com/wp-content/uploads/2025/03/male-placeholder-e1741984102525.jpg",
    description: "Lorem ipsum dolor sit amet consectetur adipiscing elit risus, eros aliquam sed fames fermentum placerat bibendum conubia curabitur, dignissim natoque ridiculus etiam nec donec lobortis.",
    location: "Los Angeles, CA",
  },
  {
    id: "3",
    title: "James",
    description: "Lorem ipsum dolor sit amet consectetur adipiscing elit risus, eros aliquam sed fames fermentum placerat bibendum conubia curabitur, dignissim natoque ridiculus etiam nec donec lobortis.",
    location: "San diego, CA",
  },
  {
    id: "4",
    title: "Jennifer",
    description: "Lorem ipsum dolor sit amet consectetur adipiscing elit risus, eros aliquam sed fames fermentum placerat bibendum conubia curabitur, dignissim natoque ridiculus etiam nec donec lobortis.",
    location: "San diego, CA",
  },
];