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 pour le commerce électronique avec des micro-interactions, une palette de couleurs en niveaux de gris, une complexité modérée, un design réactif et une prise en charge des thèmes sombres.
Carte de blog sur le design matériel
Un composant de carte d’article de blog réactif avec une image, un titre, un extrait et des informations sur l’auteur, conçu dans un style de conception matérielle avec des tons chauds de coucher de soleil. Inclut la prise en charge du mode sombre.
Composant Composants multimédias
Un composant multimédia d’interface utilisateur complexe en mode sombre pour la documentation/les sites wiki, avec un schéma de couleurs arc-en-ciel dégradé. Il comprend différents types de médias tels que la vidéo, l’audio et les images avec des informations détaillées et des éléments interactifs, tous réactifs et utilisant le HTML sémantique.