JSFiddle - React, Tailwind, and code Playground

by pj_js15

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

TypeScript

import React from 'react';

const Card = ({ imageUrl }) => {
  return (
    <div className="card">
      <img src={imageUrl} alt="Card" className="card-image" />
      <div className="heart-icon">
        <i class="fa-solid fa-heart"></i>
      </div>
    </div>
  );
};

const CardList = () => {
  // Array of image URLs for the cards
  const imageUrls = [
    'image_url_1',
    'image_url_2',
    'image_url_3',
    'image_url_4',
    'image_url_5',
  ];

  return (
    <div className="card-list">
      {imageUrls.map((url, index) => (
        <Card key={index} imageUrl={url} />
      ))}
    </div>
  );
};

export default CardList;