Composants Fiches produits Composant Cartes de produit

Composant Cartes de produit

Un composant de carte produit réactif conçu dans un style minimaliste avec une palette de couleurs pastel, adapté aux sites Web d’entreprise ou d’entreprise, et inclut la prise en charge du mode sombre.

Aperçu

HTML Code

<div class="container mx-auto p-6">
    <h2 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-200">Product Cards</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/203" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Composants associés

Composant Cartes de produit

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

Composant Cartes de produit

Composant de carte de produit avec style brutalisme, schéma de couleurs monochromatique, niveau de complexité complexe à des fins de commerce électronique.

Ouvrir

Composant Cartes de produit

Un composant de cartes produit de style brutaliste avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir