Composant multimédia E-commerce Simple Neumorphism
Composant multimédia de style Neumorphisme avec des tons de terre, complexité simple, pour site de commerce électronique, avec un design réactif et une prise en charge du thème sombre. Utilise picsum.photos pour les images.
HTML Code
<div class="p-4 max-w-sm mx-auto bg-gray-200 rounded-xl shadow-lg space-y-4 dark:bg-gray-800">
<div class="relative">
<img class="w-full h-48 object-cover rounded-md shadow-md" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
<button class="absolute top-2 right-2 bg-white text-gray-800 dark:bg-gray-700 dark:text-gray-200 p-1 rounded-full shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="text-center">
<div class="text-lg font-medium text-black dark:text-white">Product Title</div>
<p class="text-gray-500 dark:text-gray-400">$19.99</p>
</div>
<div class="flex justify-center">
<button class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-semibold rounded-lg shadow-md hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
Add to Cart
</button>
</div>
</div>Composants associés
Composant Composants multimédias
Un composant multimédia réactif pour le commerce électronique avec Material Design et une palette de couleurs monochromatiques.
Composant Composants multimédias
Composant multimédia complexe et réactif pour la consommation de contenu de blog, stylisé en mode sombre avec une palette de couleurs monochromatiques. Il comprend une image, un titre, une description et un avatar de l’auteur.
Industrial_Marketplace_Media_Component
Un composant multimédia simple, de style industriel, pour une place de marché, avec une image, un titre et un prix, en mettant l’accent sur les matériaux bruts et l’esthétique utilitaire. Utilise les couleurs d’automne et prend en charge le mode sombre.