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.
Código HTML
<div class="p-4 max-w-sm mx-auto bg-gray-200 rounded-xl shadow-lg space-y-4 dark:bg-gray-800">
<div class="relative">
<img class="w-full h-48 object-cover rounded-md shadow-md" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
<button class="absolute top-2 right-2 bg-white text-gray-800 dark:bg-gray-700 dark:text-gray-200 p-1 rounded-full shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="text-center">
<div class="text-lg font-medium text-black dark:text-white">Product Title</div>
<p class="text-gray-500 dark:text-gray-400">$19.99</p>
</div>
<div class="flex justify-center">
<button class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-semibold rounded-lg shadow-md hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
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).
Componente de medios análogos de la Bauhaus
Un componente multimedia responsivo con un diseño inspirado en la Bauhaus, que utiliza una combinación de colores análoga, adecuado para sitios web gubernamentales / de servicio público. Cuenta con formas geométricas, colores análogos primarios y compatibilidad con el modo oscuro.
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.