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
Componente de medios Glassmorphic
Un componente de tarjeta multimedia responsivo con un diseño de morfismo de vidrio (efecto de vidrio esmerilado) construido con Tailwind CSS. Cuenta con un marcador de posición de imagen (de picsum.photos) con un icono de reproducción de revelación flotante, contenido de texto, una sección de autor con un avatar (de randomuser.me) y botones de acción. El componente es compatible con el modo oscuro utilizando las variantes 'dark:' de Tailwind CSS y responde a varios tamaños de pantalla. No se requiere JavaScript. Para obtener un efecto visual óptimo, coloque este componente sobre un fondo contrastante. La funcionalidad del modo oscuro supone una configuración CSS adecuada de Tailwind (por ejemplo, 'darkMode: "class"' en su tailwind.config.js).
Componentes de medios
Un componente de estilo Neumorphism para la visualización de medios con diseño responsivo y compatibilidad con temas oscuros.
Componente de componentes de medios
Un componente multimedia responsivo inspirado en estilos de diseño retro/vintage, con una estética nostálgica de los años 80/90. Es compatible con el tema oscuro con Tailwind CSS e incluye imágenes de marcador de posición y avatares.