Composants Fiches produits Composant Cartes de produit

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.

Aperçu

HTML Code

<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>

Composants associés

Fiche produit Skeuomorphic

Un composant de carte produit skeuomorphe pour un tableau de bord, stylisé en niveaux de gris, de complexité moyenne, réactif avec le mode sombre.

Ouvrir

Composant Cartes de produit

Un composant de cartes produit réactif conçu avec des éléments 3D et une palette de couleurs vives, intégrant un thème sombre pour la consommation de blog et de contenu. Il présente une complexité moyenne avec des éléments interactifs pour l’engagement de l’utilisateur.

Ouvrir

Composant Cartes de produit

Un composant de carte produit réactif conçu dans le style Material Design, avec une palette de couleurs en niveaux de gris. Il comprend une image, un titre, une description et un bouton avec prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir