Composant Composants multimédias
Un composant multimédia réactif pour le commerce électronique avec Material Design et une palette de couleurs monochromatiques.
HTML Code
<div class="max-w-xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/thumb/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border border-gray-300 dark:border-gray-700" />
<div>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400">Product description goes here. This is a brief introduction to the product.</p>
</div>
</div>
<div class="mt-4">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-72 object-cover rounded-md shadow-sm dark:shadow-lg" />
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-lg font-bold text-gray-800 dark:text-gray-200">$49.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-500 dark:focus:ring-blue-400 transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>Composants associés
Composant Composants multimédias
Un composant multimédia réactif avec des micro-interactions avec des animations attrayantes, conçu avec Tailwind CSS. Il prend en charge le thème sombre et inclut des images et des avatars de substitution.
Bauhaus_E-commerce_Media_Component
Un composant multimédia de commerce électronique réactif et fonctionnel avec un design monochrome inspiré du Bauhaus, une prise en charge du mode sombre, mettant l’accent sur les formes géométriques et une hiérarchie visuelle claire pour la présentation des produits.
Composant Composants multimédias
Un composant de composants multimédias réactif avec un design brutal, des couleurs vives et une mise en page complexe pour un tableau de bord, avec prise en charge du thème sombre et sans JavaScript. Utilise picsum.photos pour les images et randomuser.me pour les avatars.