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
Brutalism_Job_Media_Card
Un componente multimedia complejo de estilo brutalista para una bolsa de trabajo, con alto contraste, tipografía audaz y una combinación de colores púrpura/violeta. Responsivo con soporte para modo oscuro.
Componente de componentes de medios
Un componente de componentes multimedia receptivo con un diseño brutalista, colores vibrantes y un diseño complejo para un tablero, con soporte para temas oscuros y sin JavaScript. Utiliza picsum.photos para las imágenes y randomuser.me para los avatares.
Componentes de medios Componente 2
Un componente multimedia de estilo retro/vintage con un diseño nostálgico inspirado en la estética de los años 80/90, con efectos responsivos y compatibilidad con temas oscuros, utilizando Tailwind CSS.