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.
HTML Code
<div class="p-4 sm:p-6 bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md border border-amber-300 dark:border-zinc-700 font-sans">
<div class="relative overflow-hidden mb-4 rounded-md border-2 border-amber-500 dark:border-zinc-600">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-40 sm:h-48 object-cover transition-transform duration-300 hover:scale-105">
<span class="absolute top-2 left-2 px-3 py-1 bg-amber-700 dark:bg-amber-600 text-white text-xs font-semibold uppercase rounded-full shadow-sm">New</span>
</div>
<h3 class="text-lg sm:text-xl font-bold text-amber-900 dark:text-amber-100 mb-1 leading-tight">
Industrial Gear Crate
</h3>
<p class="text-sm text-amber-800 dark:text-amber-300 mb-3 line-clamp-2">
A durable and versatile gear crate, perfect for workshop storage. Crafted from reclaimed metal. Made for heavy duty use.
</p>
<div class="flex items-center justify-between">
<span class="text-xl sm:text-2xl font-extrabold text-amber-700 dark:text-amber-400">
$49.99
</span>
<button class="px-4 py-2 bg-amber-600 dark:bg-amber-700 text-white text-sm font-semibold rounded-md shadow-lg hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
Add to Cart
</button>
</div>
</div>Composants associés
Photographie artistique Volet médiatique
Il s’agit d’un composant multimédia complexe et réactif pour les portfolios de photographie, avec un style de design aquarelle/artistique et une palette de couleurs rétro/vintage. Comprend plusieurs éléments interactifs et une prise en charge complète du mode sombre.
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.
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.