Composants Fiches produits Composant Cartes de produit

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.

Aperçu

HTML Code

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

Composants associés

Composant Cartes de produit

Composant de cartes de produits skeuomorphiques pour le tableau de bord avec un design réactif et la prise en charge du thème sombre.

Ouvrir

Composant Fiches Produits - Agriculture/Agriculture

Un composant de fiche produit réactif conçu pour l’agriculture et les sites Web agricoles, avec une typographie épurée, des systèmes de grille et des couleurs d’automne. Inclut la prise en charge du mode sombre.

Ouvrir

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