Industrial_Marketplace_Media_Component
Un componente de medios simple de estilo industrial para un mercado, con una imagen, un título y un precio, con un enfoque en las materias primas y la estética utilitaria. Utiliza colores otoñales y admite el modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de medios de viaje Art Deco
Un complejo componente multimedia inspirado en el Art Deco para sitios web de viajes y turismo, con aspectos destacados del destino con tonos sepia/marrones y patrones geométricos. Totalmente receptivo con soporte para modo oscuro.
Neumorfismo simple Componente de medios de comercio electrónico
Componente de medios de estilo neumorfismo con tonos tierra, complejidad simple, para sitio de comercio electrónico, con diseño receptivo y soporte de tema oscuro. Utiliza picsum.photos para las imágenes.
Componente de medios análogos de la Bauhaus
Un componente multimedia responsivo con un diseño inspirado en la Bauhaus, que utiliza una combinación de colores análoga, adecuado para sitios web gubernamentales / de servicio público. Cuenta con formas geométricas, colores análogos primarios y compatibilidad con el modo oscuro.