Componente de lista de deseos
Un componente de lista de deseos de estilo 3D para interfaces de redes sociales, con elementos interactivos y compatibilidad con el modo oscuro.
Código HTML
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
<div class="p-4">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Wishlist Title</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the wishlist item or purpose goes here.</p>
</div>
</div>
</div>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<div class="flex items-center justify-between">
<p class="text-gray-800 dark:text-gray-200">Item 1 - Description</p>
<img src="https://picsum.photos/50/50?image=10" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
</div>
</li>
<li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<div class="flex items-center justify-between">
<p class="text-gray-800 dark:text-gray-200">Item 2 - Description</p>
<img src="https://picsum.photos/50/50?image=20" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
</div>
</li>
<li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<div class="flex items-center justify-between">
<p class="text-gray-800 dark:text-gray-200">Item 3 - Description</p>
<img src="https://picsum.photos/50/50?image=30" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
</div>
</li>
</ul>
<div class="p-4">
<button class="w-full bg-blue-600 dark:bg-blue-500 text-white rounded-lg py-2 hover:bg-blue-700 dark:hover:bg-blue-400 transition-colors">Share Wishlist</button>
</div>
</div>Componentes relacionados
Componente de lista de deseos
Un componente responsivo de la lista de deseos con una estética de diseño retro/vintage, que utiliza una combinación de colores monocromática para fines de comercio electrónico.
Componente de la lista de deseos de Cyberpunk
Un componente complejo de lista de deseos con temática cyberpunk para aplicaciones de criptomonedas/blockchain, con fondos oscuros, acentos en tonos joya neón y un diseño receptivo con soporte para modo oscuro.
Componente de lista de deseos
Un componente de lista de deseos de diseño minimalista / plano con efectos responsivos y soporte para temas oscuros.