Componente de incrustación de medios
Un componente de incrustación de medios receptivo para comercio electrónico con un diseño minimalista, colores vibrantes y compatibilidad con el modo oscuro.
Código HTML
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl my-10 dark:bg-gray-800">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold dark:text-indigo-300">Product Name</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white">Amazing Product Title</a>
<p class="mt-2 text-gray-500 dark:text-gray-400">This is a brief description of the product, highlighting its key features and benefits. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
<button class="bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600">Add to Cart</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de incrustación de medios
Un componente de incrustación de medios brutalista, vibrante y complejo para blogs, construido con diseño receptivo y soporte de modo oscuro usando Tailwind CSS.
Componente de incrustación de medios
Un componente de incrustación de medios simple y receptivo con diseño 3D en escala de grises y soporte de modo oscuro, adecuado para sitios web comerciales. Utiliza Tailwind CSS para el estilo.
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.