Tarjeta de comercio electrónico
Componente de tarjeta de comercio electrónico receptivo con soporte de modo oscuro utilizando los principios de Tailwind CSS y Material Design. Cuenta con un esquema de colores vibrantes con complejidad moderada que incluye elementos interactivos como botones y efectos de desplazamiento. Utiliza un diseño basado en cuadrículas e incorpora sombras para darle profundidad.
Código HTML
<div class="dark:bg-gray-800 dark:text-white p-4 rounded-lg shadow-lg grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="relative"> <img class="w-full h-48 object-cover rounded" src="https://picsum.photos/seed/picsum/400/300" alt="Product Image"> <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> -20% </div> </div> <div class="flex flex-col justify-between"> <div> <h3 class="text-xl font-bold dark:text-white">Product Title</h3> <p class="text-gray-600 dark:text-gray-300">Short product description with vibrant accents.</p> <div class="flex items-center mt-2"> <span class="text-lg font-semibold text-blue-600 dark:text-blue-400">$19.99</span> <span class="text-sm text-gray-500 line-through ml-2">$24.99</span> </div> </div> <div class="flex space-x-2 mt-4"> <button class="flex-grow bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-700 dark:hover:bg-blue-800"> Add to Cart </button> <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded dark:bg-gray-600 dark:hover:bg-gray-700 dark:text-white"> Wishlist </button> </div> </div> </div>Componentes relacionados
Componente de tarjeta brutalista
Un componente de tarjeta brutalista con diseño responsivo y soporte para modo oscuro.
Componente de tarjetas
Un componente de tarjetas complejo diseñado para el modo oscuro, adecuado para el consumo de blogs y contenido con un esquema de color triádico.
Componente de tarjetas
Un componente de tarjeta de portafolio receptivo con un estilo de diseño brutalista, que utiliza una combinación de colores pastel y una complejidad moderada con funciones interactivas. Esta tarjeta muestra el trabajo o los productos y es compatible con el modo oscuro.