Composant d’intégration de média
Un composant d’intégration multimédia conçu pour le commerce électronique avec un style de conception 3D, une palette de couleurs complémentaire et une mise en page réactive qui prend en charge le mode sombre.
HTML Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out">
<div class="relative">
<img src="https://picsum.photos/400/200" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 rounded-b-lg">
<h2 class="text-white text-lg font-semibold">Product Title</h2>
<p class="text-gray-300">Short description of the product goes here.</p>
</div>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-200">Add to Cart</p>
<div class="flex justify-between items-center mt-2">
<span class="text-gray-800 dark:text-gray-200 font-bold text-xl">$49.99</span>
<button class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-bold py-2 px-4 rounded">Buy Now</button>
</div>
</div>
</div>Composants associés
Composant d’intégration de média
Un composant d’intégration multimédia réactif conçu avec un style de neumorphisme, avec des couleurs vives et une interface interactive adaptée aux applications de tableau de bord.
Composant d’intégration de média
Composant d’intégration de médias réactifs avec style Glassmorphism, modèle de couleurs analogue et prise en charge du mode sombre pour la consommation de contenu.
Composant d’intégration de média rétro
Un composant multimédia réactif avec un design « Rétro/Vintage », inspiré de l’esthétique des années 80/90 comme les vieux moniteurs CRT et les lecteurs magnétoscopes. Il utilise une palette de couleurs complémentaires de sarcelle et d’orange sur une base gris ardoise, adaptée aux sites Web « Business/Corporate ». Le composant présente une complexité modérée avec des effets de survol sur le bouton de lecture et la vignette multimédia, une fausse animation lumineuse REC et des éléments de contrôle décoratifs non fonctionnels. Il inclut la prise en charge du thème sombre à l’aide du préfixe 'dark :' de Tailwind. La zone multimédia est conçue pour un rapport d’aspect de 16:9 (nécessite le plugin de rapport d’aspect Tailwind ou une solution de repli CSS comme l’astuce du rembourrage inférieur). L’image de remplacement de picsum.photos est utilisée.