Componente de incrustación de medios
Un componente de incrustación de medios diseñado para el comercio electrónico con un estilo de diseño 3D, una combinación de colores complementaria y un diseño receptivo que admite el modo oscuro.
Código HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out">
<div class="relative">
<img src="https://picsum.photos/400/200" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 rounded-b-lg">
<h2 class="text-white text-lg font-semibold">Product Title</h2>
<p class="text-gray-300">Short description of the product goes here.</p>
</div>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-200">Add to Cart</p>
<div class="flex justify-between items-center mt-2">
<span class="text-gray-800 dark:text-gray-200 font-bold text-xl">$49.99</span>
<button class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-bold py-2 px-4 rounded">Buy Now</button>
</div>
</div>
</div>Componentes relacionados
Componente de incrustación de medios retro
Un componente de incrustación de medios receptivo con un diseño retro / vintage, colores vibrantes, complejidad moderada y soporte de modo oscuro, adecuado para plataformas de comercio electrónico.
Componente de incrustación de medios retro
Un componente de incrustación de medios receptivo con un diseño "Retro / Vintage", inspirado en la estética de los años 80 / 90 como los viejos monitores CRT y reproductores de VCR. Utiliza un esquema de color complementario de verde azulado y naranja sobre una base gris pizarra, adecuado para sitios web de "Negocios / Corporaciones". El componente presenta una complejidad moderada con efectos de desplazamiento en el botón de reproducción y la miniatura de medios, una animación de luz REC falsa y elementos de control decorativos no funcionales. Incluye soporte para temas oscuros que utilizan el prefijo 'dark:' de Tailwind. El área de medios está diseñada para una relación de aspecto de 16:9 (requiere el complemento de relación de aspecto Tailwind o un truco de fondo de relleno similar al respaldo de CSS). Se utiliza la imagen de marcador de posición de picsum.photos.
Componente de incrustación de medios
Un componente de incrustación de medios interactivo diseñado con el estilo Neumorphism en Tailwind CSS, que admite el modo oscuro.