Componente de componentes de medios
Un componente multimedia responsivo para el comercio electrónico con Material Design y combinación de colores monocromática.
Código HTML
<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>Componentes relacionados
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.
Brutalismo Booking Componente de Medios
Un componente multimedia simple de estilo brutalista para sistemas de reservas, con alto contraste y un esquema de color complementario, totalmente receptivo con soporte para modo oscuro.
Componente de componentes de medios
Un componente multimedia responsivo con microinteracciones con animaciones atractivas, diseñado con Tailwind CSS. Es compatible con el tema oscuro e incluye imágenes de marcador de posición y avatares.