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.
HTML Code
<div class="max-w-xs mx-auto bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="relative">
<img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=1" alt="Product image">
<div class="absolute top-0 right-0 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-xs px-2 py-1 m-2 rounded-md">New</div>
</div>
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-bold text-xl mb-2">Product Name</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features and benefits.</p>
<div class="flex items-center justify-between">
<span class="text-gray-900 dark:text-white font-bold text-lg">$199.99</span>
<button class="bg-gray-600 dark:bg-gray-400 hover:bg-gray-700 dark:hover:bg-gray-500 text-white dark:text-gray-900 font-bold py-2 px-4 rounded-md">Add to Cart</button>
</div>
</div>
</div>Composants associés
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.
Composant Cartes de produit
Il s’agit d’un composant complexe et réactif de cartes de produits avec un design d’entreprise/professionnel utilisant une palette de couleurs violet/violet, adapté aux actualités ou aux listes de produits de services professionnels. Inclut la prise en charge du mode sombre.
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.