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
Glassmorphism Composant de support pour la fabrication
Un composant multimédia réactif conçu pour les applications industrielles/manufacturières, avec des éléments translucides givrés, des couleurs neutres froides et la prise en charge du mode sombre.
Glassmorphism Media Components Component
Composant multimédia Glassmorphism avec effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS
Composant Composants multimédias
Un composant multimédia conçu dans le style brutalisme, présentant une mise en page audacieuse avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.