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.
HTML Code
<div class="max-w-xs mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
<div class="relative">
<img class="object-cover w-full h-48 transition-transform duration-300 transform group-hover:scale-105" src="https://picsum.photos/400/300?random=1"
alt="Product Image">
<div
class="absolute top-0 left-0 flex items-center justify-center w-full h-full text-white transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
</path>
</svg>
</div>
</div>
<div class="px-4 py-3">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Product Name</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Short product description goes here.</p>
<div class="flex items-center justify-between mt-3">
<span class="text-xl font-bold text-gray-800 dark:text-white">$29.99</span>
<button
class="px-3 py-2 text-xs font-medium text-white uppercase transition-colors duration-300 transform bg-gray-800 rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600">
Add to Cart
</button>
</div>
</div>
</div>
Composants associés
Composants multimédias Composant avec Glassmorphism
Composant avec conception Glassmorphism, prise en charge du mode réactif et sombre
Skeuomorphic_Grayscale_Media_Component
Un composant multimédia complexe et réactif conçu dans un style skeuomorphe en niveaux de gris pour les sites Web d’entreprise, avec plusieurs éléments interactifs et la prise en charge du mode sombre.
Composant multimédia Glassmorphic
Un composant de carte multimédia réactif avec un design glassmorphism (effet verre givré) construit avec Tailwind CSS. Comprend un espace réservé à l’image (de picsum.photos) avec une icône de lecture de survol, du contenu textuel, une section d’auteur avec un avatar (à partir de randomuser.me) et des boutons d’action. Le composant prend en charge le mode sombre à l’aide des variantes CSS 'dark :' de Tailwind et est réactif sur différentes tailles d’écran. Aucun JavaScript n’est requis. Pour un effet visuel optimal, placez ce composant sur un fond contrasté. La fonctionnalité du mode sombre suppose une configuration CSS Tailwind appropriée (par exemple, 'darkMode : « class"' dans votre tailwind.config.js).