Fiches produits

Composant Cartes de produit

Un composant de carte produit réactif conçu pour le mode sombre, avec des couleurs vives et de multiples éléments interactifs adaptés aux blogs et à la consommation de contenu.

Ouvrir l’aperçu

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
  <h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
  <div class="flex items-center mb-4">
    <img src="https://picsum.photos/id/100/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
    <div class="ml-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
      <p class="text-gray-400 text-sm">By: Author Name</p>
    </div>
  </div>
  <p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
  <div class="flex justify-between items-center">
    <span class="text-lg text-vibrant-orange-500 font-semibold">$99.99</span>
    <button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
  </div>
  <div class="mt-4">
    <button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
  </div>
</div>

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg mt-4">
  <h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
  <div class="flex items-center mb-4">
    <img src="https://picsum.photos/id/101/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
    <div class="ml-4">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
      <p class="text-gray-400 text-sm">By: Author Name</p>
    </div>
  </div>
  <p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
  <div class="flex justify-between items-center">
    <span class="text-lg text-vibrant-orange-500 font-semibold">$79.99</span>
    <button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
  </div>
  <div class="mt-4">
    <button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
  </div>
</div>

Composant Cartes de produit

Un composant de cartes produit réactif conçu avec le style skeuomorphism, la palette de couleurs des tons de terre et la prise en charge du thème sombre. Idéal pour les tableaux de bord.

Ouvrir l’aperçu

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <p class="ml-2 text-gray-800 dark:text-gray-200">User Name</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=2" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <p class="ml-2 text-gray-800 dark:text-gray-200">User Name</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=3" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <p class="ml-2 text-gray-800 dark:text-gray-200">User Name</p>
        </div>
    </div>
</div>

Un composant de carte produit simple et réactif avec des micro-interactions, conçu pour les interfaces de médias sociaux à l’aide de Tailwind CSS, prenant en charge le thème sombre et le schéma de couleurs en niveaux de gris.

Ouvrir l’aperçu

                <div class="flex flex-col max-w-xs mx-auto rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white transition-colors duration-300">Product Title</h2>
        <p class="mt-1 text-gray-600 dark:text-gray-300 transition-colors duration-300">Brief description of the product. Engaging text to attract users.</p>
        <div class="flex items-center mt-3">
            <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <span class="ml-2 text-gray-700 dark:text-gray-200 transition-colors duration-300">User Name</span>
        </div>
    </div>
</div>
<div class="mt-4">
    <button class="w-full py-2 px-4 bg-gray-800 text-white rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500 transition-colors duration-300">Add to Cart</button>
</div>

Composant Cartes de produit

Un composant de cartes produit réactif avec des micro-interactions, utilisant une palette de couleurs en niveaux de gris et prenant en charge le mode sombre. Idéal pour les blogs ou la consommation de contenu.

Ouvrir l’aperçu

                <div class="flex flex-wrap justify-center p-4">
    <div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">
        <div class="bg-white dark:bg-gray-800 p-4">
            <h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar">
                <div class="text-gray-800 dark:text-white">
                    <p class="text-sm font-medium">Author Name</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
                </div>
            </div>
        </div>
    </div>
    <div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">
        <div class="bg-white dark:bg-gray-800 p-4">
            <h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
                <div class="text-gray-800 dark:text-white">
                    <p class="text-sm font-medium">Author Name</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
                </div>
            </div>
        </div>
    </div>
</div>

Composant Cartes de produit

Un composant complexe de la carte produit avec des micro-interactions attrayantes et une palette de couleurs monochromatiques. Conçu pour les sites Web d’entreprise, il est réactif et prend en charge le mode sombre.

Ouvrir l’aperçu

                <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 p-6">
    <div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
        <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-xl font-bold text-gray-900 dark:text-gray-100">$99.99</span>
                <button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
            </div>
        </div>
    </div>
    <div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
        <img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-xl font-bold text-gray-900 dark:text-gray-100">$89.99</span>
                <button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
            </div>
        </div>
    </div>
    <div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
        <img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-xl font-bold text-gray-900 dark:text-gray-100">$79.99</span>
                <button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
            </div>
        </div>
    </div>
</div>

Composant Cartes de produit

Un composant de carte produit réactif avec une conception 3D, une palette de couleurs analogues et une prise en charge du mode sombre, conçu pour les interfaces de médias sociaux.

Ouvrir l’aperçu

                <div class="max-w-sm mx-auto relative z-10 transform transition-transform duration-500 ease-in-out hover:scale-105">
  <div class="bg-gradient-to-br from-teal-400 via-blue-500 to-purple-600 dark:from-gray-700 dark:via-gray-800 dark:to-black shadow-xl rounded-lg overflow-hidden dark:shadow-lg">
    <div class="relative h-48">
      <img class="w-full h-full object-cover" src="https://picsum.photos/seed/picsum/400/300" alt="Product Image">
      <div class="absolute top-0 right-0 bg-blue-600 text-white px-3 py-1 m-2 rounded-lg text-sm font-bold dark:bg-blue-400">New</div>
    </div>
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Awesome Product Title</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mt-1">This is a short description of the product, highlighting its key features and benefits.</p>
      <div class="flex items-center mt-4">
        <div class="text-xl font-bold text-blue-600 dark:text-blue-400">$99.99</div>
        <button class="ml-auto bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
      </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <span class="text-sm text-gray-700 dark:text-gray-400">Posted by John Doe</span>
      </div>
    </div>
  </div>
</div>

<style>
  /* Basic 3D effect. More advanced 3D requires transforms on hover/active states combined with perspective on parent. */
  .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  .dark\:shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
</style>

Composant Cartes de produit

Un composant de cartes produit réactif conçu à l’aide des principes de conception matérielle avec Tailwind CSS. Il prend en charge le mode sombre et propose des ombres et des mises en page basées sur une grille.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Product Cards</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/150?random=1" alt="Product Image" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
                <p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/150?random=2" alt="Product Image" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h3>
                <p class="text-gray-600 dark:text-gray-400">$39.99</p>
                <p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/150?random=3" alt="Product Image" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 3</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
                <p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
            </div>
        </div>
    </div>
</div>

Composant Cartes de produit

Composant de cartes de produit avec conception 3D, effets réactifs et prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="flex flex-wrap justify-center bg-gray-100 dark:bg-gray-900 py-8">
  <div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
    <div class="relative overflow-hidden">
      <img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
      <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
      <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full">New</span>
    </div>
    <div class="p-6">
      <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Awesome Product Name</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">This is a brief description of the amazing product.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-white">$199.99</span>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
      </div>
    </div>
  </div>

  <div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
    <div class="relative overflow-hidden">
      <img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
      <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
      <span class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-full">Sale</span>
    </div>
    <div class="p-6">
      <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Another Great Product</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Here's a description for another fantastic product.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-white">$149.50</span>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
      </div>
    </div>
  </div>

    <div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
    <div class="relative overflow-hidden">
      <img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
      <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>

    </div>
    <div class="p-6">
      <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Product with no tag</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">This is a product without a special tag.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-white">$99.00</span>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
      </div>
    </div>
  </div>

</div>

Composant Cartes de produit

Un composant de carte produit de style brutalisme avec un contraste élevé, des effets réactifs et une prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="flex flex-wrap justify-center space-x-4 space-y-4 p-5 bg-gray-100 dark:bg-gray-800">
    <div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
        <div class="p-4">
            <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
            <p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$29.99</span>
                <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic2/400/300" alt="Product Image">
        <div class="p-4">
            <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
            <p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$39.99</span>
                <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic3/400/300" alt="Product Image">
        <div class="p-4">
            <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
            <p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$49.99</span>
                <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

Composant Cartes de produit avec interface utilisateur en mode sombre

Composant de cartes de produit avec interface utilisateur en mode sombre et effets réactifs à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="bg-gray-900 text-white py-8">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-8">Our Products</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 1</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$19.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 2</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$29.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 3</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$39.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Catégories