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
Brutalisme Booking Media Composante
Un composant multimédia simple, de style brutaliste, pour les systèmes de réservation, avec un contraste élevé et une palette de couleurs complémentaire, entièrement réactif avec prise en charge du mode sombre.
Composants multimédias Composant avec Glassmorphism
Composant avec conception Glassmorphism, prise en charge du mode réactif et sombre
Playful_Booking_Media_Component
Un composant multimédia simple, ludique et réactif pour les systèmes de réservation, avec une palette de couleurs triadique, des éléments arrondis et la prise en charge du mode sombre.